/* ═══════════════════════════════════════════════════════════════════════════
   VIDEO DE ESCENA · REGLAS COMPARTIDAS POR LAS 7 SECCIONES DE SERVICIO
   ═══════════════════════════════════════════════════════════════════════════

   Orden de Oz (2026-10-22): «aquí hay que crear algunas reglas que serán
   reutilizadas en las otras 5 secciones porque serán iguales prácticamente».

   PC:
     · agranda el video al 80 % de pantalla
     · máscara de opacidad hacia la orilla, 15 % de ancho, en los 4 lados
     · centra el video verticalmente en pantalla

   POR QUÉ ESTE ARCHIVO Y NO UN BLOQUE MÁS EN 07-servicios.css

   07-servicios.css ya tiene ~2 400 líneas y dentro viven los estilos de Diseño
   web (`.dn-*`), que están cerrados y aprobados. Meter aquí reglas que van a
   usar SIETE secciones obliga a tocar ese archivo cada vez que se añada una
   sección nueva, con el riesgo de rozar lo aprobado.

   Estas tres reglas son DE TODAS las secciones: un archivo propio las deja en
   un sitio único, y añadir la sección 3, 4 o 7 es solo darle la clase. Nada de
   aquí depende de `.dn-`. (Este archivo SÍ va después de 07-servicios.css en
   index.html, porque las secciones necesitan ganar en cascada a lo que allí se
   declare del hero.)
   ─────────────────────────────────────────────────────────────────────────── */

/* ── LOS VALORES, EN UN SOLO SITIO ────────────────────────────────────────
   Oz corrigió el 80 % (2026-10-22): «creo que 80 % es mucho, se corta el video;
   se puede hacer relativo al tamaño de la pantalla, que quede 5 % de margen,
   así se arregla sea del tamaño que sea la pantalla, el margen hacia los 4
   lados».

   Tenía razón en lo de «se corta»: el 80 % era del ANCHO solamente. En una
   pantalla apaisada (1440×900) un video 16:9 al 80 % del ancho mide 648 px de
   alto sobre 900 de ventana: cabe, pero en cuanto la ventana baja de alto (un
   portátil de 1366×768, o el navegador con barras) se sale por arriba y por
   abajo. Un porcentaje de una sola dimensión no puede respetar los cuatro
   lados.

   `--escena-video-holgura` es ese 5 % de margen, en LOS CUATRO LADOS. De él se
   derivan el ancho y el alto máximos: siempre 90 % de la pantalla en cada eje.

   `--escena-video-funde` es el 15 % de la máscara. Igual: un valor, siete
   secciones.

   Se declaran en `:root` y no en cada clase de sección: son de la escena, no de
   un servicio concreto. Un token por sección (`--au-`, `--dn-`, …) obligaría a
   repetir los mismos dos valores siete veces. */
:root {
  /* El 5 % de aire por lado. En los cuatro lados sale del mismo valor. */
  --escena-video-holgura: 5%;

  /* ── LA CAJA DEL VIDEO: EL HUECO REAL, NO LA PANTALLA ────────────────────
     Aquí está la trampa que hay que evitar. El video NO vive en la ventana:
     vive dentro de `.serv__scroll`, que YA tiene `padding-top: --alto-cabecera`
     (la cabecera es fija, mide 57 px y se come la parte de arriba), y de
     `.serv`, que termina en `--alto-pie`.

     Así que el alto disponible NO es `100dvh`: es la ventana MENOS la cabecera
     y MENOS el pie. Darle al video un 90 % de `100dvh` lo saca de pantalla
     aunque en teoría «quepa», porque la escena ya mide 100dvh dentro de un
     hueco más pequeño — y entonces aparece scroll.

     Por eso el alto se descuenta pieza a pieza, igual que hizo Diseño web en su
     riel (§21.8):

       --escena-video-alto = 100dvh − cabecera − pie − un margen de aire

     `--alto-pie` lleva respaldo a 0px porque en las secciones de servicio el pie
     puede no estar presente; sin respaldo, un `var()` sin valor invalida TODO el
     `calc()` y el video se quedaría sin tope. */

  /* Aire mínimo arriba y abajo, además de la cabecera y el pie. */
  --escena-video-aire: var(--e-5, 24px);

  --escena-video-alto: calc(100dvh
                            - var(--alto-cabecera, 57px)
                            - var(--alto-pie, 0px)
                            - var(--escena-video-aire) * 2);

  /* Ancho: el 100 % del hueco menos el margen del 5 % por lado. Aquí NO se
     resta la cabecera porque la cabecera es de alto, no de ancho; a los lados
     solo se descuenta la holgura. */
  --escena-video-ancho: calc(100% - var(--escena-video-holgura) * 2);

  /* Ancho del desvanecido de la máscara, por lado. */
  --escena-video-funde: 15%;
}

/* ── 1 · EL VIDEO: 80 % DE PANTALLA ───────────────────────────────────────
   La clase se llama `escena__video` porque NO es de un servicio: es el video
   del hero de cualquiera de los siete. Cada sección la aplica a su propio
   <video> y hereda las tres reglas de este archivo.

   `width: 80vw` con `max-width: 100%`: en PC manda el 80 % pedido; en una
   pantalla estrecha el 80vw podría pasarse del contenedor, así que el tope de
   100 % evita que se salga. (Los tamaños de tablet y teléfono se afinan aparte:
   aquí solo se pide PC.)

   `height: auto` + `aspect-ratio`: el alto sale del propio video, no se
   estira. Todos los videos del proyecto son 960×540 (16:9).

   `display: block`: sin esto un elemento inline deja 3-4 px de línea base
   debajo y el centrado vertical queda 2 px bajo el centro. Ya nos pasó. */
.escena__video {
  display: block;

  /* EL VIDEO CABE EN LAS DOS DIMENSIONES, Y SE ENCOGE SOLO.
     `width` + `height` con `auto` en el otro eje solo respeta UN límite: con
     `width: 90%` y `height: auto`, en una pantalla baja el video se sale por
     abajo. Poniendo los DOS máximos y `object-fit: contain`, el navegador
     elige el lado que más limita y encoge el video hasta caber entero, sin
     recortar ni deformar.

     `max-width` + `max-height` y NO `width` + `height`: con máximos el video
     nunca crece por encima de su tamaño natural (960×540). Un video pequeño no
     se estira hasta verse borroso; uno grande se encoge. `contain` garantiza
     que se ve ENTERO: nada de recortes en los cuatro lados. */
  /* ── OCUPA EL HUECO (opción B, elegida por Oz) ──────────────────────────
     `width: var(--escena-video-ancho)` es el 100 % del hueco menos el 5 % por
     lado. `max-height` recorta si el 16/9 del video no cabe de alto.

     `width` FIJO (no `max-width`) es lo que diferencia esta opción de la
     anterior: así el video SÍ crece por encima de sus 960 px nativos y ocupa
     todo el hueco en un monitor grande, en vez de quedarse en 864 px con aire
     alrededor. El precio es que en pantallas muy grandes se reescala y se ve
     algo más blando; se acepta ahora y se resuelve re-exportando los videos a
     1440×810 cuando estén las siete secciones.

     `height: auto` + `max-height` + `object-fit: contain`: el alto lo pone el
     propio 16/9 del video, pero nunca pasa del hueco disponible. `contain` (y
     NO `cover`) garantiza que se ve ENTERO: `cover` recortaría los lados para
     llenar la caja. Oz lo pidió explícito: «reduce el tamaño del video, no lo
     cortes». */
  /* El video se mide contra el HUECO, y el 5 % de margen se aplica aquí en los
     dos ejes. `--escena-video-alto` ya descuenta cabecera, pie y aire (ver
     arriba), así que este alto es el que cabe de verdad.

     `width: auto` + `max-height` + `aspect-ratio` propio del video: el
     navegador calcula el ancho a partir del 16/9 del archivo. Así el video
     crece hasta llenar el alto disponible sin salirse nunca, sea cual sea la
     pantalla. Es el mismo patrón que usa el riel de Diseño web (§21.8), donde
     ya está probado. */
  /* ── EL ANCHO SE CALCULA, NO SE DEJA EN `auto` ──────────────────────────
     TRAMPA PAGADA (2026-10-22): con `width: auto` el navegador toma el ANCHO
     INTRÍNSECO del archivo — 960 px — y `max-height` NO lo escala: un
     `max-height` solo pone un techo, no estira nada. Resultado: el video se
     quedaba clavado en 960×540 en un 1920×1080 aunque hubiera 907 px de alto
     disponibles. Medido, no supuesto.

     La fórmula, copiada del riel de Diseño web (§21.8) donde ya funciona:
     el ancho es el del video a la ALTURA máxima permitida, manteniendo su
     16/9. Si eso pasa del ancho disponible, el `min()` lo recorta.

        alto disponible × 16/9  →  ancho que llenaría el alto
        min(eso, ancho del hueco) → el que quepa

     16/9 = 1.7778. Los videos del proyecto son todos 960×540, así que el
     factor es constante; si algún día entra un video con otra proporción, esta
     línea hay que ajustarla (o se sustituye por `aspect-ratio`).

     `height: auto` deja que el ancho mande y el alto lo ponga el propio video;
     `max-height` sigue de red de seguridad por si el `min()` se queda corto. */
  width: min(var(--escena-video-ancho),
             calc(var(--escena-video-alto) * 1.7778));
  height: auto;
  max-width: 100%;
  max-height: var(--escena-video-alto);
  object-fit: contain;
}

/* ── 2 · LA MÁSCARA: 15 % EN LOS CUATRO LADOS ─────────────────────────────
   `mask-image` admite varias capas y `mask-composite: intersect` las cruza: un
   píxel solo se ve si LAS CUATRO lo dejan ver. Eso es exactamente «desvanecido
   hacia los 4 lados».

   Por qué CUATRO gradientes y no uno: un `linear-gradient` único (por ejemplo
   en diagonal) solo difumina dos esquinas; deja los otros dos lados con el
   borde duro. Se probó y se vio: la máscara «existía» pero el borde derecho y
   el inferior se cortaban en seco.

   POR QUÉ LOS COLORES SON `rgb(var(--escena-video-velo-*))` Y NO `#000` PURO

   Aquí está lo de «toma en cuenta los temas», y no es un detalle: el negro puro
   funciona para FUNDIR hacia lo oscuro, pero en EL TEMA CLARO el negro no funde
   hacia nada — el fondo es hueso, y el negro en los bordes deja un halo sucio
   que se ve como un marco quemado.

   La máscara no debe ir hacia «negro», debe ir hacia EL FONDO DEL TEMA. Por eso
   los gradientes llegan a `--escena-video-velo`, un token que vale `--fondo` en
   cada tema: casi negro con el tema oscuro y casi blanco con el claro. Así el
   borde del video se disuelve en la página, sea cual sea el tema.

   Un gradiente de máscara usa el CANAL ALFA, no el color: por eso se interpola
   `rgba(velo, 0)` → `rgba(velo, 1)`. El color es siempre el del fondo del tema;
   lo que cambia de 0 a 1 es la opacidad. El resultado es idéntico al de
   `transparent → #000`, pero sin el halo del negro en tema claro.

   `-webkit-mask-*` va aparte porque Safari no entiende la propiedad sin
   prefijo en todas sus versiones, y sin ella el video se vería con borde duro. */
.escena__video {
  -webkit-mask-image:
    linear-gradient(to right,  rgba(var(--escena-video-velo, 0, 0, 0), 0), rgba(var(--escena-video-velo, 0, 0, 0), 1) var(--escena-video-funde)),
    linear-gradient(to left,   rgba(var(--escena-video-velo, 0, 0, 0), 0), rgba(var(--escena-video-velo, 0, 0, 0), 1) var(--escena-video-funde)),
    linear-gradient(to bottom, rgba(var(--escena-video-velo, 0, 0, 0), 0), rgba(var(--escena-video-velo, 0, 0, 0), 1) var(--escena-video-funde)),
    linear-gradient(to top,    rgba(var(--escena-video-velo, 0, 0, 0), 0), rgba(var(--escena-video-velo, 0, 0, 0), 1) var(--escena-video-funde));

  mask-image:
    linear-gradient(to right,  rgba(var(--escena-video-velo, 0, 0, 0), 0), rgba(var(--escena-video-velo, 0, 0, 0), 1) var(--escena-video-funde)),
    linear-gradient(to left,   rgba(var(--escena-video-velo, 0, 0, 0), 0), rgba(var(--escena-video-velo, 0, 0, 0), 1) var(--escena-video-funde)),
    linear-gradient(to bottom, rgba(var(--escena-video-velo, 0, 0, 0), 0), rgba(var(--escena-video-velo, 0, 0, 0), 1) var(--escena-video-funde)),
    linear-gradient(to top,    rgba(var(--escena-video-velo, 0, 0, 0), 0), rgba(var(--escena-video-velo, 0, 0, 0), 1) var(--escena-video-funde));

  /* `source-in` es el equivalente antiguo del prefijo a `intersect`. */
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* ── EL COLOR DEL VELO, UNO POR TEMA ──────────────────────────────────────
   Los tres canales del fondo de cada tema, para poder inyectar la opacidad con
   `rgba(var(--escena-video-velo), α)`.

   Se declara aquí y no en 01-declaraciones.css porque solo lo consume este
   archivo: la máscara del video. Si mañana otro componente necesita el fondo en
   canales, se mueve allí. */
:root,
[data-tema="oscuro"] {
  --escena-video-velo: 10, 14, 20;      /* --tinta-950 */
}

[data-tema="claro"] {
  --escena-video-velo: 244, 242, 238;   /* --hueso-100 */
}

/* ── 3 · CENTRADO VERTICAL EN PANTALLA ────────────────────────────────────
   El contenedor del hero ocupa la sección entera (`inset: 0`) y organiza sus
   hijos en columna. Con `justify-content: center` el bloque cae en el centro
   del marco, que es la pantalla: la sección ya mide `100dvh`.

   Se aplica a la clase compartida `.escena__centro` para que cualquier sección
   la use. La columna y el `justify-content` ya los traía `.dn-hero__contenedor`
   de Diseño web; aquí se declaran explícitos para que el centrado NO dependa
   de que la sección haya heredado esa clase.

   `padding-block` en lugar de `padding`: se reserva aire arriba y abajo, pero
   el centrado sigue siendo del CONTENIDO, no de la caja. Con un `padding`
   asimétrico (por ejemplo 16 px arriba y 50 px abajo) el bloque se desplaza y
   el desfase se mide en decenas de píxeles. Ya pasó: 50px de padding desviaban
   el centro 25px. */
.escena__centro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: clamp(16px, 3vh, 48px);
}

/* ── LIBERAR EL LIENZO PARA EL VIDEO ──────────────────────────────────────
   El lienzo de Diseño web (`.dn-hero__lienzo`) mide `max-width: 80%` y tiene
   `aspect-ratio: 1080/810` (4:3), porque lo diseñó para sus cinco capas webp.

   Metido dentro de esa caja, el video NUNCA llega al 80 vw que pidió Oz: el
   80 vw del video se recorta contra el 80 % del lienzo y sale MÁS CHICO que
   antes. Y el ratio 4:3, con `object-fit: cover`, se come los lados del video
   16:9.

   Esta clase libera la caja para el video: sin tope de ancho (el ancho lo pone
   `--escena-video-ancho`) y sin ratio impuesto (el alto sale del propio video
   con `height: auto`).

   SE APLICA SOLO A AUTOMATIZACIONES POR AHORA, con su propia clase
   `.au-hero__lienzo`, para no tocar `.dn-hero__lienzo`, que está cerrado y
   aprobado por Oz. Cuando las otras 5 secciones se clonen, esta liberación se
   mueve a la clase compartida `.escena__lienzo` y las siete la heredan. */
.au-hero__lienzo {
  /* El lienzo NO impone tamaño: es solo el envoltorio del video y deja que sea
     el propio video quien decida su caja (width + max-height, ver arriba).

     Se quita `aspect-ratio` (era 1080/810, de las capas) y `max-width: 80 %`
     (de Diseño web): con ellos, el video nunca llegaba al hueco aunque sus
     propias reglas dijeran lo contrario. Un contenedor con ratio propio recorta
     al hijo 16/9.

     EL LIENZO OCUPA EL HUECO, NO EL TAMAÑO DEL VIDEO (corregido 2026-10-22).
     Antes llevaba `width: fit-content`, y eso creaba un círculo vicioso: el
     lienzo se encogía a los 960 px NATIVOS del video, y como el video toma el
     90 % de SU CONTENEDOR, el resultado era 864 px — el 5 % se aplicaba sobre
     el video, no sobre la pantalla. En un 1920×1080 el video salía a 864×486,
     la mitad del hueco real.

     Con `width: 100%` el lienzo ocupa el contenedor entero y el video se mide
     contra el HUECO: `max-height` recorta el alto disponible (ventana menos
     cabecera, pie y aire) y el ancho sale del 16/9. Eso es lo que de verdad
     significa «nunca sale de pantalla, sin scroll».

     El rótulo sigue copiando su ancho desde JS (`igualarRotulo`), que ahora lee
     el ancho del lienzo lleno. No se rompe. */
  width: 100%;
  /* `max-width` TAMBIÉN, no solo `width` (corregido 2026-10-22).
     `.dn-hero__lienzo` de Diseño web tiene `max-width: 80%`. Poner `width: 100%`
     sin anular el máximo NO sirve: el navegador aplica el máximo sobre el 100 %
     y el lienzo se queda en el 80 %. Medido en tablet vertical 834×1112:
     lienzo de 619 px cuando había 824 disponibles — el video salía a 594 px, el
     71 % de la pantalla, con 400 px de aire arriba y abajo.

     Con `max-width: 100%` el lienzo usa el ancho real y el video crece con él.
     El alto lo sigue vigilando `--escena-video-alto`, así que no hay scroll. */
  max-width: 100%;
  aspect-ratio: auto;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── EL RÓTULO FUERA DEL FLUJO: EL VIDEO SE CENTRA SOLO ───────────────────
   Opción A, elegida por Oz (2026-10-22) para arreglar el desvío de +73 a +84 px.

   EL PROBLEMA, CON NÚMEROS:
   El rótulo de Diseño web lleva `margin-block-start: -100px`, que lo mete 100 px
   dentro del video. El flex del contenedor calcula el contenido así:

       video 735 + rótulo 60 + margen −100 = 695   (en 1920×1080)

   y centra ESA caja. Pero lo que el visitante ve es el video, que empieza más
   abajo de donde el flex cree: el centro del video cae en 527 px sobre una
   pantalla de 1080, o sea 73 px por debajo del centro real. Medido en las seis
   resoluciones: +73, +74, +77, +78, +80, +84 px.

   LA SOLUCIÓN: sacar el rótulo del flujo con `position: absolute`. Así el flex
   solo ve el video y lo centra exacto — que es lo que se pidió («centra el
   video verticalmente en pantalla»). El rótulo se posiciona él mismo pegado al
   borde inferior del lienzo, con su solape de siempre.

   POR QUÉ NO SE QUITA EL `-100px`: ese valor lo aprobó Oz para Diseño web y ahí
   sigue intacto. Aquí lo que cambia es DÓNDE se ancla (`bottom`, no
   `margin-top`), no cuánto se solapa.

   SOLO AUTOMATIZACIONES, por ahora: la clase `.au-hero__rotulo` es suya. Cuando
   las otras cinco secciones se clonen, esto sube a la clase compartida. */
.au-hero__rotulo {
  position: absolute;
  /* ANCLADO AL LIENZO, NO AL CONTENEDOR (corregido 2026-10-22).
     Con `left: 0` el rótulo se iba al borde del CONTENEDOR —medido en x=0, o
     sea pegado al borde izquierdo de la pantalla— mientras el video arranca en
     x=302. El texto quedaba 302 px a la izquierda de la imagen.

     El lienzo ocupa el 100 % del ancho, y el video se centra dentro con su
     16/9, así que hay franjas vacías a los lados. El texto tiene que arrancar
     donde arranca el VIDEO, no donde arranca la franja.

     La izquierda y el ancho los pone el JS (`alinearRotulo`), que mide el video
     y los copia. Aquí solo se deja el ancla vertical. */
  left: 0;
  width: 100%;
  /* Su borde inferior queda 100 px POR ENCIMA del borde inferior del lienzo:
     eso reproduce el solape de -100px sobre el video. */
  bottom: 100px;
  margin-block-start: 0;
  padding-inline: 0;
  text-align: left;
}

/* ── LA ESCENA MIDE EL HUECO, NO LA VENTANA ───────────────────────────────
   Opción A, elegida por Oz (2026-10-22) para cerrar el desvío de 57 px.

   EL PROBLEMA, MEDIDO:
   El video SÍ estaba centrado en su contenedor (597 = 597), pero el contenedor
   estaba 57 px bajo la pantalla:

     .serv__scroll tiene padding-top: --alto-cabecera (57px)  →  la escena empieza en y=57
     .serv__escena tiene min-height: 100dvh (1080px)           →  termina en y=1137

   Es decir: la escena mide la ventana ENTERA pero arranca 57 px más abajo, así
   que se desborda por el fondo y su centro cae en 597 en vez de 540. El video,
   centrado en ese contenedor, hereda el desplazamiento.

   LA CORRECCIÓN: restar la cabecera y el pie al alto mínimo. Así la escena mide
   exactamente el hueco visible, su centro coincide con el centro de la pantalla
   y el video —que ya se centra bien— cae en 540.

   Es el mismo principio que ya usa el alto del video (`--escena-video-alto`
   descuenta cabecera y pie). Aquí se aplica a la CAJA que lo contiene, para que
   las dos cuentas cuadren.

   SOLO AUTOMATIZACIONES, por ahora: `.au-hero` es su clase. Tocar
   `.serv__escena` habría cambiado el alto de TODAS las escenas de Diseño web,
   que están cerradas y aprobadas. Cuando las otras cinco secciones se clonen,
   esta corrección sube a la clase compartida.

   ── LOS 15 px QUE QUEDAN SON CORRECTOS (decisión de Oz, 2026-10-22) ──────
   Con esta regla el video queda centrado en el HUECO ÚTIL: de 57 (bajo la
   cabecera) a 1052 (sobre el pie), centro 554,5. El centro FÍSICO de la
   pantalla es 540, así que el video va 15 px por debajo.

   NO ES UN FALLO: es la mitad de (pie − cabecera) = (28 − 57) / 2. El contenido
   se centra en el espacio que el visitante ve libre, no en la ventana bruta, y
   así no se mete bajo la cabecera ni pisa el pie.

   Oz eligió dejarlo así (opción A): 15 px sobre 1080 es un 1,4 %, invisible.
   SI ALGUIEN QUIERE EL CENTRO FÍSICO, no se toca esta regla: se compensa con
   `margin-top: -15px` en `.au-hero`, y entonces el video sube hacia la
   cabecera. Es peor, y por eso no está puesto. */
.au-hero {
  min-height: calc(100dvh
                   - var(--alto-cabecera, 57px)
                   - var(--alto-pie, 0px));
}

/* ── EL HALO DETRÁS DEL TEXTO: nace del TEXTO, no de una caja ─────────────
   Oz corrigió la primera versión (2026-10-22): «no es lo que busco, debe nacer
   desde el texto hacia los 4 lados; además creo que el contenedor del texto
   ocupa todo el ancho porque el efecto sale del texto, se ve mal».

   Tenía razón en las dos cosas:

   1. Puse un `background: linear-gradient` en la CAJA del rótulo. Esa caja mide
      1306 px de ancho (el ancho del video), así que el degradado salía como una
      BANDA ancha pegada abajo, no como un halo alrededor de las letras.
   2. El degradado era de arriba a abajo: nacía del borde superior de la caja,
      no de las letras.

   LO CORRECTO ES `text-shadow`: el halo es una COPIA DIFUMINADA DEL TEXTO, así
   que nace de cada letra y se expande hacia los cuatro lados. No lleva caja, no
   ocupa ancho, no se ve dónde empieza ni dónde acaba.

   VARIAS CAPAS, NO UNA. Un solo `text-shadow` con blur grande deja el halo
   tenue y el texto poco despegado. Lo que funciona es acumular capas:

     · 0 0 2px   — un filo pegado, para el contraste inmediato de las letras
     · 0 0 12px  — el halo corto
     · 0 0 30px  — el medio
     · 0 0 60px  — el amplio, el que hace que el texto "flote"

   EL COLOR ES EL DEL TEMA. `--escena-video-velo` vale 10,14,20 en oscuro y
   244,242,238 en claro: el halo se tiñe del fondo de cada tema, así que en
   oscuro el texto flota sobre una sombra profunda y en claro sobre una niebla
   clara. Es el mismo token que usa la máscara del video y el borde del texto se
   disuelve hacia el MISMO color que el borde del video.

   Se mantiene el `text-shadow` de tres capas que ya traía el rótulo de Diseño
   web (el `0 1px 2px` de contacto y los dos de profundidad): se AÑADEN las
   capas del halo, no se sustituyen. */
.au-hero__rotulo {
  /* Sin fondo y sin relleno: el efecto sale del texto. */
  background: none;
  padding-top: 0;
  padding-inline: 0;
  box-sizing: border-box;

  text-shadow:
    /* --- halo hacia los CUATRO lados, del más ceñido al más amplio --- */
    0 0 2px   rgba(var(--escena-video-velo), 1),
    0 0 12px  rgba(var(--escena-video-velo), 0.95),
    0 0 30px  rgba(var(--escena-video-velo), 0.85),
    0 0 60px  rgba(var(--escena-video-velo), 0.7),
    /* --- profundidad: un toque de sombra desplazada para dar cuerpo --- */
    0 2px 6px  rgba(var(--escena-video-velo), 0.55),
    0 8px 26px rgba(var(--escena-video-velo), 0.35);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABLET · el video se agranda para no quedar perdido en el centro
   ═══════════════════════════════════════════════════════════════════════════

   PROBLEMA MEDIDO (2026-10-22). En tablet el video salía a solo el 67 % del
   ancho, con un aire enorme arriba y abajo:

     | pantalla    | video   | aire arriba/abajo |
     |-------------|---------|-------------------|
     | 1024× 768   | 686×386 | 206 / 177         |
     | 1180× 820   | 791×445 | 202 / 173         |
     |  834×1112   | 557×313 | 414 / 385  <--   |
     |  820×1180   | 548×308 | 450 / 421  <--   |
     |  768×1024   | 513×288 | 382 / 353  <--   |

   En HORIZONTAL está bien. El problema es el tablet VERTICAL: sobra ALTO, no
   ancho, así que el video —que calcula su ancho como alto×16/9— se queda
   pequeño y flota en medio de la pantalla.

   LA CORRECCIÓN: en tablet, menos margen y menos aire. El video crece hasta
   ocupar el ancho disponible; el `max-height` sigue vigilando que no se salga
   de alto, así que la promesa de «nunca genera scroll» se mantiene.

   POR QUÉ EL BREAKPOINT ES 600–1099 px DE ANCHO: es el mismo tramo que usa
   Diseño web para tablet (§21.8), para que las secciones se comporten igual.
   El discriminante de TELÉFONO es la ALTURA (máx 500 px) y no el ancho, porque
   un teléfono tumbado mide 844 px de ancho y por ancho caería aquí. Esa regla
   ya está aplicada en el bloque de teléfono de 07-servicios.css.

   LOS DOS VALORES:
     · holgura 5 % -> 2 %: en vertical el aire lateral sobraba; con 2 % el video
       gana ~110 px de ancho en un iPad de 834.
     · aire 24 px -> 8 px: el aire de arriba y abajo se duplicaba con el margen
       natural del centrado, y en vertical se notaba como un vacío.

   Se declaran en el bloque de tablet, NO en :root, para no tocar PC ni
   teléfono. Los tokens se sobrescriben por cascada: :root define 5 %/24 px y
   este @media los reemplaza solo en su tramo. */
@media (min-width: 600px) and (max-width: 1099px) {
  :root {
    --escena-video-holgura: 2%;
    --escena-video-aire: 8px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABLET · el rótulo sube al mismo sitio que en PC
   ═══════════════════════════════════════════════════════════════════════════

   Orden de Oz (2026-10-22): «yo lo dejara como esta en este momento y subiria
   el titulo a la misma ubicacion que en pc».

   EL PROBLEMA, MEDIDO — el texto arranca a esta altura respecto al alta del
   video (0 % = borde superior del video, 100 % = borde inferior):

     | pantalla   | texto bajo el borde del video |
     |------------|-------------------------------|
     | 1920×1080  |   771 px  =  85 % del alto     |  <- PC, la referencia
     | 1600× 900  |   593 px  =  81,6 %            |
     | 1440× 900  |   578 px  =  85 %              |
     | 1366× 768  |   472 px  =  79,3 %            |
     | 1280× 720  |   429 px  =  78,4 %            |
     |  834×1112  |   568 px  = 135,9 %  <-- tablet |
     |  820×1180  |   599 px  = 145,7 %  <-- tablet |
     |  768×1024  |   508 px  = 132,3 %  <-- tablet |

   En tablet el texto cae al 136-146 % del alto del video: o sea, POR DEBAJO
   del video, flotando en la zona vacía. En PC cae al ~85 %, es decir solapado
   con la parte baja de la imagen.

   LA CAUSA: `bottom: 100px` es una distancia ABSOLUTA a la escena. En PC el
   video casi llena la escena, así que 100 px desde abajo cae sobre el video.
   En tablet el video es bajo y la escena alta, así que los mismos 100 px caen
   muy lejos, debajo del video.

   LA CORRECCIÓN: en vez de una distancia fija, se ancla el rótulo al BORDE
   INFERIOR DEL VIDEO con el mismo solape proporcional que en PC.

   ¿POR QUÉ `85 %` Y NO `100 %`? Porque en PC el texto NO arranca en el borde
   inferior del video: arranca al 85 % de su alto, o sea 15 % ANTES de que el
   video acabe. Eso es lo que se ve en PC: el rótulo solapado con los últimos
   píxeles de la imagen. Reproducirlo aquí mantiene la MISMA sensación.

   ¿POR QUÉ SE MUEVE EL LIENZO Y NO EL RÓTULO? Porque el rótulo es
   `position: absolute` dentro del contenedor, y `bottom` se mide contra ese
   contenedor (que ocupa toda la escena), no contra el lienzo. Cambiar `bottom`
   obligaría a saber el alto de la escena, que cambia con cada tablet. Mover el
   lienzo hacia abajo con `transform` es más simple: el rótulo va pegado a él.

   Lo hace el JS (`subirRotuloTablet`), porque necesita MEDIR el video: su alto
   depende del ancho disponible y del 16/9, y eso no se sabe desde el CSS. */

/* ── RÓTULO EN DOS COLORES (Herramientas IA) ───────────────────────────────
   El original (ds-v2 maqueta-herramientas-ia.html) pinta «Herramientas» con el
   color del texto y «IA» en azul. Se reutiliza `--azul-marca`, el MISMO token
   que la «netia» de la marca: no es un azul decorativo, es el azul de Sysnetia.
   Así el rótulo y el logotipo no pueden divergir si mañana se ajusta la marca.

   `font-style: inherit` porque `.au-hero__rotulo-txt` puede estar en 400 y no
   queremos que este span herede una itálica de un <em> padre.

   Selector con DOS clases para no afectar a ningún otro rótulo: solo el que
   lleve las dos. `.au-hero__rotulo` es del hero y no se toca. */
.au-hero__rotulo .au-hero__rotulo-ia {
  color: var(--azul-marca);
  font-style: inherit;
}

/* ── TABLET · se mueve EL RÓTULO, y solo el rótulo ────────────────────────
   Intentos anteriores, y por qué fallaron (medidos, no supuestos):

   · Mover el LIENZO: el video subió de 362 a 140 y el texto se quedó en 930.
     Peor: la separación pasó del 136 % al 189 % del alto del video.
   · Mover el CONTENEDOR: video y texto bajaron JUNTOS (video 362->62,
     texto 938->638). La separación siguió en 577 px exactos. Con `translateY`
     se desplaza el par, no su distancia: no sirve para separar dos cosas que
     están en el mismo contenedor.

   Así que se desplaza SOLO el rótulo. Su `bottom` se mide contra el
   contenedor (que ocupa toda la escena), así que el desplazamiento necesario
   es la diferencia entre dónde está y dónde debería estar — y lo calcula el
   JS midiendo, porque depende del alto del video, que sale del 16/9.

   El valor `--au-rotulo-sube` lo escribe el JS. Positivo = sube. */
@media (min-width: 600px) and (max-width: 1099px) {
  .au-hero__rotulo {
    /* `calc(-1 * var(...))` NO es válido: en `calc` una unidad no se puede
       multiplicar por un número sin unidad de esa forma en todos los motores,
       y el navegador descarta la declaración entera (medido: la variable tenía
       222px y `getComputedStyle().translate` devolvía `none`).
       Se usa `transform` con `translateY` y el signo va en la variable: el JS
       ya escribe el valor NEGATIVO. Así no hay `calc` que falle. */
    transform: translateY(var(--au-rotulo-sube, 0px));
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TELÉFONO · el rótulo va DEBAJO del video, a todo su ancho, sin pisarlo
   ═══════════════════════════════════════════════════════════════════════════

   Orden de Oz (2026-10-22): «en telefono me gustaria que ocupara todo el ancho
   del video y se ubique abajo sin pisar el video».

   OJO: esto es DISTINTO de PC y tablet, donde el rótulo SÍ se solapa con la
   parte baja del video (solape del 15 %, al 85 % del alto). En teléfono se pide
   lo contrario: debajo y sin tocar. No unificar: son dos criterios.

   LOS TRES PROBLEMAS QUE HABÍA (medidos en 390×844):

     1. EL TEXTO NO CABÍA. 48 px con `white-space: nowrap` dan 392 px de ancho
        sobre un video de 322 px: sobresalía 35 px y se cortaba
        («Automatizacione…»). En 360×740 el video mide 295 px, así que peor.
     2. EL TEXTO FLOTABA. Estaba al 175 % del alto del video (318 px por
        debajo), no al ~85 % como en PC y tablet.
     3. EN HORIZONTAL SE ROMPÍA. En 844×390 el rótulo bajaba +94 px, porque el
        bloque de teléfono de 07-servicios.css le aplica un `translateY(-56px)`
        pensado para vertical. En un teléfono tumbado ese desplazamiento deja el
        texto donde no toca.

   LA SOLUCIÓN, pieza por pieza:

     · TAMAÑO CON `clamp()`. `clamp(1.5rem, 8.2vw, 2.25rem)`: en 360 px de
       pantalla da ~29,5 px, en 390 px da ~32, en 414 px da ~34. Con eso
       «Automatizaciones» (16 caracteres) entra a lo ancho en cualquier
       teléfono, sin `transform: scale()` — que emborrona el texto porque el
       navegador lo rasteriza antes de escalarlo.
     · SE QUEDA `nowrap`. El contrato pide el rótulo en UNA línea (§21.8), así
       que se ajusta el tamaño, no se parte en dos.
     · ANCHO DEL VIDEO, NO DEL CONTENEDOR. El `width` lo sigue copiando el JS
       (`igualarRotulo`), que ya mide el video y no el lienzo.
     · DEBAJO Y SIN PISAR: `bottom: auto` + `top: 100%` lo pone justo bajo el
       borde inferior del video, sin solape. Como el rótulo es `absolute`
       respecto al contenedor, se ancla al LIENZO con `position` heredada…
       por eso el ancla real la hace el JS (`bajarRotuloTelefono`), que mide.

   POR QUÉ EL BREAKPOINT INCLUYE `max-height: 500px`: es el discriminante de
   teléfono que ya usa 07-servicios.css. Un teléfono TUMBRADO mide 844 px de
   ancho y por ancho caería en tablet; la altura (390 px) lo delata. Si se
   filtrara solo por `max-width: 719px`, el teléfono en horizontal se quedaría
   con las reglas de tablet, que es justo lo que hoy lo rompe. */
/* ═══ TELÉFONO VERTICAL: el rótulo va DEBAJO, sin pisar ═════════════════════
   Se filtra por ANCHO (≤719) y por ALTURA (≤500) — pero ver más abajo el
   bloque de horizontal, que corrige el caso tumbado. */
@media (max-width: 719px), (max-height: 500px) {
  .au-hero__rotulo {
    /* Sin solape: debajo del video. */
    bottom: auto;
    top: 100%;
    margin-block-start: 0;
    /* El desplazamiento del tablet no aplica aquí: la posición la fija
       `--au-rotulo-baja`, que escribe el JS midiendo el borde del video. */
    transform: translateY(var(--au-rotulo-baja, 0px));
    text-align: left;
  }

  /* EL `font-size` VA EN EL PADRE TAMBIÉN, y no por gusto.
     `.dn-hero__rotulo` de 07-servicios.css lleva
     `font-size: clamp(3rem, 4.4vw, 4.5rem)`. En un teléfono de 390 px el 4.4vw
     son 17 px, así que MANDA EL MÍNIMO: 3rem = 48 px. Poniendo el clamp solo en
     el `-txt` el navegador seguía midiendo el texto a 48 px porque el padre lo
     impone y el `-txt` no lo hereda con un valor menor: lo recalcula desde el
     padre. Medido: seguía en 48 px y desbordaba 35 px.
     Se fija en LOS DOS, padre e hijo, para que no haya duda de quién manda. */
  .au-hero__rotulo,
  .au-hero__rotulo .dn-hero__rotulo-txt {
    /* `clamp` y no un valor fijo: un solo valor no sirve de 320 a 414 px.
       8.2vw da ~29,5 px en 360, ~32 en 390 y ~34 en 414; el tope de 2.25rem
       (36 px) evita que en un teléfono grande crezca de más. */
    font-size: clamp(1.5rem, 8.2vw, 2.25rem);
  }

  .au-hero__rotulo .dn-hero__rotulo-txt {
    line-height: 1.15;
    /* Se queda en una línea (contrato §21.8): el tamaño se ajusta, no se parte. */
    white-space: nowrap;
    /* El ancho lo pone el JS al del video. `100%` de respaldo. */
    display: block;
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TELÉFONO TUMBRADO · el video cabe entero y el rótulo se SOLAPA sobre él
   ═══════════════════════════════════════════════════════════════════════════

   Orden de Oz (2026-10-22): «el video nunca debe salir de pantalla, o sea que
   no sobre; y el texto puede solaparse sobre el video, ya lo hacemos en otros
   dispositivos».

   O sea: en horizontal se vuelve al criterio de PC/tablet (solape al 85 % del
   alto del video). El «debajo sin pisar» es SOLO para el teléfono vertical.

   QUÉ PASABA (medido en 844×390):

     cabecera acaba en y=41
     video           y=9  → 298   <-- 32 px POR DEBAJO de la cabecera
     texto           y 306 → 347

   El video se metía bajo la cabecera. LA CAUSA NO ERA EL RÓTULO: era
   `.dn-hero__contenedor { transform: translateY(-56px) }` del bloque de
   teléfono de 07-servicios.css. Ese −56 px se calculó para VERTICAL (1180 px
   de alto), donde sobraban 112 px de aire que había que repartir. En
   horizontal (390 px de alto) no sobra nada: los mismos −56 px suben el
   conjunto de más y le comen la cabecera al video.

   LA CORRECCIÓN: en horizontal se anula ese −56 px. El contenedor vuelve a su
   sitio, el video queda entre cabecera y pie, y el rótulo se solapa encima
   como en PC.

   POR QUÉ SOLO `max-height` Y NADA DE `min-width`: el filtro es la ALTURA y
   nada más. Se probó con `min-width: 600px` añadido y dejaba FUERA a los
   teléfonos pequeños tumbados: 568×320 es un teléfono en horizontal con menos
   de 600 px de ancho, caía en el bloque de VERTICAL y le seguía aplicando el
   `top: 100%` (el rótulo debajo). Medido: el texto acababa en 348 con el pie
   en 296, o sea fuera de pantalla.

   La ALTURA es el único discriminante fiable: ningún teléfono vertical baja de
   500 px de alto (el más pequeño ronda 568), así que `max-height: 500px` solo
   lo cumple el que está tumbado, sea de 568 o de 896 px de ancho.

   ESTE BLOQUE VA AL FINAL DEL ARCHIVO A PROPÓSITO: tiene que ganar por orden
   de cascada al bloque de teléfono de arriba, que aplica a los dos casos. */
@media (max-height: 500px) {
  /* Se devuelve el contenedor a su sitio: fuera el −56 px del vertical. */
  .au-hero .dn-hero__contenedor,
  .dn-hero__contenedor:has(.au-hero__rotulo) {
    transform: none;
  }

  /* Y el rótulo vuelve al criterio de PC: solapado sobre la parte baja del
     video, no debajo. El desplazamiento lo calcula el JS midiendo. */
  .au-hero__rotulo {
    bottom: 0;
    top: auto;
    transform: translateY(var(--au-rotulo-solapa, 0px));
  }

  /* El texto puede ser mayor que en vertical: aquí caben ~36-40 px de sobra
     a lo ancho (el video mide 514 px en 844). */
  .au-hero__rotulo,
  .au-hero__rotulo .dn-hero__rotulo-txt {
    font-size: clamp(1.5rem, 5.2vw, 2.75rem);
  }
}