/* ════════════════════════════════════════════════════════════════════
   WEBLYM · LA PORTADA                                          (04/10)

   La hoja de dashboard/landing/index.html, escrita a mano (sin Tailwind:
   un paso de compilacion menos que olvidar).

   ── DE DONDE SALEN LOS NUMEROS ─────────────────────────────────────
   De MEDIR la imagen de referencia del 04/10 (702 x 421) con un factor de
   1,55: con el, el lema y el texto de la barra dan 16 px, que es el cuerpo
   normal de una portada, y el titular 58. Todas las medidas de aqui son
   las de la referencia multiplicadas por ese factor; el render se compara
   con ella reducido al mismo tamanio.
   ════════════════════════════════════════════════════════════════════ */

:root {
  --tinta: #000;
  --tinta-suave: #262626;
  --boton-oscuro: #0f0f0f;
  /* El azul de los dos botones de descuento (05/10, referencia), medido
     en la imagen. */
  --boton-azul: #397ef8;
  /* SU RELIEVE ES EL DE LOS BOTONES AZULES DE LA CASA («Publicar» del
     editor, styles/17): mismos tres colores, misma receta. Copiados y no
     leidos de alli porque la portada no carga las hojas del panel; si
     cambian alli, se cambian aqui. */
  --boton-azul-anillo-alto: rgb(153 184 239);
  --boton-azul-anillo-bajo: rgb(48 82 142);
  --boton-azul-brillo: rgb(255 255 255 / 0.16);
  --boton-claro: #fafafa;
  --boton-claro-borde: #c8c8c8;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

/* SIN REBOTE AL LLEGAR ARRIBA O ABAJO (06/10, pedido): el estirón elástico
   del navegador al pasarse del final hacía que la portada entera se
   despegara y volviera. */
html {
  overscroll-behavior-y: none;
}

/* LA PORTADA EN ORDENADOR VA AL 90 % (06/10, pedido: «que se vea como al
   90 % y no al 100 %»). Es exactamente lo que hace el zoom del navegador
   —comprobado: con esto, a 1536 de ancho, el titular mide 948 px, los
   mismos que con el navegador al 90 %—, y por eso es un `zoom` y no
   cambiar los números uno a uno: todo baja a la vez, también lo que va en
   píxeles fijos (la barra, los botones). En móvil no: allí la portada está
   medida a la pantalla y cabe entera sin deslizarse. */
@media (min-width: 641px) {
  html {
    zoom: 0.9;
  }
}

body {
  background: #fff;
  color: var(--tinta);
  font-family: Inter, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

/* NADA SE PUEDE SALIR POR LOS LADOS (12/10, reportado: «todo hacia la
   izquierda, hasta el nav»). Varias piezas pasaban del canto derecho —el
   video de Estadisticas a proposito, la demo, la escena— y la pagina medía
   hasta 52 px mas que la ventana. El `overflow-x: hidden` del body no
   basta: oculta la barra pero el navegador puede seguir desplazando la
   pagina de lado (un focus(), recuperar la posicion al recargar), y
   entonces TODO se ve corrido a la izquierda. `clip` recorta sin dejar
   nada que desplazar, y no rompe el sticky de la barra, que ademas va
   fuera de <main>. */
main {
  overflow-x: clip;
}

/* ── LA BARRA ───────────────────────────────────────────────────── */

/* LA BARRA SE QUEDA ARRIBA AL DESLIZAR (sticky) Y, EN CUANTO HAY ALGO
   DEBAJO, SE VUELVE CRISTAL (.barra--flotando, la pone barra.js).
   ARRIBA DEL TODO ES TRANSPARENTE A PROPOSITO: ahi no tapa nada, y asi la
   portada se ve exactamente como la referencia. El cristal aparece solo
   cuando hace falta separarla de lo que pasa por debajo. */
.barra {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  height: 71px;
  padding: 17.5px 15.5px 0 23px;
  border-bottom: 1px solid transparent;
  transition:
    background-color 0.3s cubic-bezier(0.32, 0.72, 0, 1),
    border-color 0.3s cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

/* EL CRISTAL, A LA MANERA DEL «LIQUID GLASS» DE macOS. Que se NOTE es
   cuestion de cuatro cosas, y hacen falta las cuatro:
     1. QUE SE VEA A TRAVES: blanco al 45-30 % y no al 72. Con mas blanco
        el desenfoque esta pero no se ve, y el cristal pasa por plastico.
     2. SATURACION Y BRILLO SUBIDOS en el desenfoque: lo de debajo se cuela
        con su color, mas vivo, que es lo que hace que parezca vidrio.
     3. EL BRILLO DEL CANTO: una linea blanca por dentro arriba y otra por
        dentro abajo, mas un velo que se apaga hacia abajo —la luz que coge
        la pieza por arriba—.
     4. DOS SOMBRAS: un filo fino de contacto y una ancha y suave debajo.
   DONDE NO HAY backdrop-filter el cristal no se veria y el texto se leeria
   mal, asi que ahi se queda un blanco al 85 %: el bloque @supports de abajo
   es el unico que baja la opacidad. */
.barra--flotando {
  background-color: rgb(255 255 255 / 0.85);
  border-bottom-color: rgb(0 0 0 / 0.08);
  box-shadow: 0 8px 30px -12px rgb(0 0 0 / 0.18);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .barra--flotando {
    background-color: transparent;
    background-image: linear-gradient(
      to bottom,
      rgb(255 255 255 / 0.5),
      rgb(255 255 255 / 0.3)
    );
    -webkit-backdrop-filter: blur(22px) saturate(2.2) brightness(1.08);
    backdrop-filter: blur(22px) saturate(2.2) brightness(1.08);
    border-bottom-color: rgb(255 255 255 / 0.55);
    box-shadow:
      inset 0 1px 0 0 rgb(255 255 255 / 0.95),
      inset 0 -1px 0 0 rgb(255 255 255 / 0.45),
      0 1px 0 0 rgb(0 0 0 / 0.07),
      0 10px 34px -10px rgb(0 0 0 / 0.22);
  }
}

.barra__logo {
  display: block;
  margin-top: 4px;
}

.barra__logo img {
  display: block;
  width: auto;
  height: 33px;
}

.barra__nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.barra__enlace {
  margin-right: 25px;
  color: var(--tinta-suave);
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0;
  /* En pildora, como «Solicitar descuento» (05/10, pedido). */
  border-radius: 999px;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
}

.boton--claro {
  width: 124px;
  background: var(--boton-claro);
  border: 1px solid var(--boton-claro-borde);
  color: var(--tinta);
}

/* EL CANTO DE ABAJO MAS CLARO es el relieve que trae la referencia: el
   negro no es plano, tiene una linea de luz justo encima del borde
   inferior. */
.boton--oscuro {
  width: 110px;
  color: #fff;
  font-weight: 400;
}

/* El globo y el corte son solo de ordenador (ver abajo). */
.barra__idioma,
.barra__corte {
  display: none;
}

/* ── LA BARRA EN ORDENADOR (12/10, referencia) ──────────────────────
   «Precios» en negro, el globo del idioma, un corte fino, «Contáctanos»
   como enlace subrayado y «Descuento» mas ancho y con la letra mas
   grande. Los numeros salen de medir la referencia (939 x 348, una
   ventana de 937) y van divididos por el zoom de 0,9 de la portada. */
@media (min-width: 641px) {
  .barra {
    padding: 16.7px 9px 0 23px;
  }

  .barra__logo {
    margin-top: 5.5px;
  }

  .barra__nav {
    gap: 0;
  }

  .barra__enlace {
    margin-right: 45px;
    color: var(--tinta);
    font-weight: 500;
  }

  .barra__idioma {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    padding: 0;
    border: 0;
    background: none;
    position: relative;
    top: 1.7px;
    color: #0e0e0e;
    cursor: pointer;
  }

  .barra__idioma svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .barra__corte {
    display: block;
    width: 1px;
    position: relative;
    top: 1px;
    height: 20px;
    margin: 0 13.4px 0 14.4px;
    background: #dcdcdc;
  }

  /* «Contáctanos» deja de ser pildora: texto gris oscuro subrayado. */
  .barra__contacto {
    width: auto;
    height: auto;
    margin-right: 22px;
    border: 0;
    background: none;
    color: #4a4a4a;
    font-size: 17.6px;
    font-weight: 400;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
  }

  .boton--oscuro {
    width: 163px;
    height: 37.8px;
    font-size: 18px;
  }
}

/* ── EL INICIO ──────────────────────────────────────────────────── */

/* TODO EL BLOQUE ESCALA CON LA PANTALLA, y es lo que lo mantiene igual que
   la referencia a cualquier ancho. La imagen ocupa una fraccion del ancho;
   si el titular se quedara en pixeles fijos, a 1920 se veria diminuto sobre
   una imagen enorme. `--u` es un pixel de la referencia medida (1088 de
   ancho): a 1088 vale 1, y por encima crece hasta un ancho de 1920 (era
   1440 hasta el 12/10, pedido: «que haya menos espacio a los lados»; lo
   mismo en todas las hojas de la portada). Por encima de 1920 no se para:
   escala.js amplía la página entera en proporción.
   POR DEBAJO LOS TEXTOS TIENEN SUELO (los max()): escalar en linea recta
   dejaria el lema en 5 px en un movil. */
.inicio {
  --u: calc(min(100vw, 1920px) / 1088);
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1920px;
  margin: 0 auto;
  padding: calc(39.3 * var(--u)) 16px 0;
  text-align: center;
}

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

.inicio__lema {
  margin: max(10px, calc(12.7 * var(--u))) 0 0;
  font-size: max(13px, calc(16.6 * var(--u)));
}

.inicio__accion {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: max(34px, calc(44 * var(--u)));
  margin-top: max(11px, calc(15.7 * var(--u)));
  padding: 0 max(24px, calc(36.7 * var(--u)));
  font-size: max(15px, calc(17.7 * var(--u)));
  border-radius: 999px;
  color: #fff;
}

/* ── EL RELIEVE DE LOS DOS BOTONES AZULES ───────────────────────────
   El de los botones azules de la casa, tal cual («Publicar», styles/17,
   donde esta medido y explicado entero):
     · sin borde, y un anillo de medio pixel del propio azul por fuera;
     · el relleno se aclara un poco en el ultimo tramo de abajo;
     · y un anillo de 1 px por dentro, claro de la mitad para arriba y
       oscuro de la mitad para abajo. Va en un ::after con mascara porque un
       borde solo admite un color por lado. Sin clics: pointer-events. */
.boton--oscuro,
.inicio__accion {
  position: relative;
  border: 0;
  background-color: var(--boton-azul);
  background-image: linear-gradient(to bottom,
      rgb(255 255 255 / 0) 0%,
      rgb(255 255 255 / 0) 69%,
      var(--boton-azul-brillo) 85%);
  box-shadow: 0 0 0 0.5px var(--boton-azul);
}

.boton--oscuro::after,
.inicio__accion::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(to bottom,
      var(--boton-azul-anillo-alto) 0%,
      var(--boton-azul-anillo-alto) 44%,
      var(--boton-azul-anillo-bajo) 56%,
      var(--boton-azul-anillo-bajo) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* EN «DESCUENTO» DE LA BARRA, A MEDIA FUERZA (05/10, pedido): en un boton
   tan bajo el anillo ocupa mas parte del alto y se notaba demasiado. */
.boton--oscuro::after {
  opacity: 0.5;
}

/* ── EL HOVER DE LOS BOTONES (05/10, pedido) ────────────────────────
   Un paso mas oscuro cada uno, y nada mas: ni crecen ni se mueven. El
   azul baja a #2f6fe6 —el mismo tono, apagado— y el relieve se queda
   encima, asi que sigue siendo el mismo boton. El claro pasa a un gris
   apenas marcado y su borde se oscurece un punto; «Precios», que no es un
   boton, solo aclara la letra (oscurecerla, de #262626 a negro, no se ve).
   SOLO CON RATON (`hover: hover`): en una pantalla tactil el hover se
   queda pegado despues de tocar y el boton parece pulsado. */
.barra__enlace,
.boton--claro,
.boton--oscuro,
.inicio__accion,
.inicio__enviar {
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

@media (hover: hover) {
  .barra__enlace:hover {
    color: #737373;
  }

  .boton--claro:hover {
    background-color: #f0f0f0;
    border-color: #b8b8b8;
  }

  .boton--oscuro:hover,
  .inicio__accion:hover,
  .inicio__enviar:hover {
    background-color: #2f6fe6;
  }
}

/* EL HOVER DE «CONTÁCTANOS» EN ORDENADOR (12/10, pedido). Desde el 12/10 ahí
   es un enlace subrayado y no una píldora, pero seguía cogiendo el hover de
   `.boton--claro`: un fondo gris #f0f0f0 detrás de un texto sin caja. Ahora
   hace lo que «Precios» —se aclara al mismo #737373— y el subrayado se
   separa un poco más del texto, que es la pista de que se puede pulsar. En
   móvil sigue siendo píldora y conserva el hover de botón. */
@media (min-width: 641px) {
  .barra__contacto {
    transition: color 0.15s ease, text-underline-offset 0.15s ease;
  }
}

@media (min-width: 641px) and (hover: hover) {
  .barra__contacto:hover {
    background-color: transparent;
    color: #737373;
    text-underline-offset: 4px;
  }
}

/* ══ LA ESCENA DE ORDENADOR: UN CARRUSEL DE WEBS (05/10) ═════════════
   Las piezas de la imagen de abajo, montadas para que las webs roten como
   en el video de referencia (escena.js cambia el `data-pos` de cada una).
   Ocupa el MISMO sitio que la imagen fija de antes: el 97,6 % del ancho,
   empezando en el 2,9 %, y subida por debajo del boton.

   ── TODO SE MIDE EN PORCENTAJES DEL LIENZO ORIGINAL ────────────────
   La imagen fija media 3212 x 1768 y las piezas salen de medir donde
   caia cada una dentro de ella (por correlacion, no a ojo). Los `left` y
   `width` van en % del ancho de la escena y los `top` y `height` en % de
   su alto; lo que no es una posicion —desenfoque, resplandor, radios— en
   `cqw`, o sea en % de su ancho (container-type).
   ════════════════════════════════════════════════════════════════════ */
.escena {
  /* El viaje entero de una web, y la curva de la casa. */
  --viaje: 0.9s;
  --curva: cubic-bezier(0.32, 0.72, 0, 1);
  position: relative;
  container-type: inline-size;
  align-self: flex-start;
  /* UN 5 % MAS PEQUENIA (05/10, pedido: un 8 % y luego «un pelin mas
     grande») SIN MOVERSE DE SITIO: el ancho baja de 0,994 a 0,945 y los dos margenes compensan lo que eso movia
     —el marco del centro queda con el mismo borde de arriba y el mismo
     centro—. Arriba basta un % porque el margen vertical tambien se mide
     contra el ancho: 0,0051 = (0,994 − 0,945) × 0,1886 × 1768/3212. */
  width: calc((100% + 32px) * 0.945);
  aspect-ratio: 3212 / 1768;
  /* LA PROFUNDIDAD de las dos webs inclinadas de los lados: cuanto menor,
     mas exagerada la perspectiva. En `cqw` para que sea la misma a
     cualquier ancho. */
  perspective: 70cqw;
  /* CENTRADA BAJO EL TEXTO (12/10, reportado: «todo descentrado a la
     izquierda»). El margen izquierdo era 0,0531 y dejaba el marco del
     centro un 1,94 % de la escena a la derecha del centro de la pagina
     (17-24 px), asi que el titular, el lema y el boton parecian ir
     corridos a la izquierda. 0,0531 − 0,0194 × 0,945 = 0,0348. */
  margin: calc(-40 * var(--u) + (100% + 32px) * 0.0051) 0 0
          calc((100% + 32px) * 0.0348 - 16px);
}

/* UNA VENTANA: el marco y la web de dentro. Viaja de un sitio a otro
   animando su caja, y por el camino se enciende o se apaga el marco. */
.escena__ventana {
  position: absolute;
  border-radius: 1.37cqw;
  transition:
    left var(--viaje) var(--curva),
    top var(--viaje) var(--curva),
    width var(--viaje) var(--curva),
    height var(--viaje) var(--curva),
    filter var(--viaje) var(--curva),
    background-color var(--viaje) var(--curva),
    transform var(--viaje) var(--curva),
    /* La opacidad dura el viaje entero: es lo que tarda en ENCENDERSE la
       web nueva de la derecha, y asi llega a la vez que la de la izquierda
       termina de llegar. Con 0,45 s aparecia de golpe. (El apagado de la
       que se va tiene su propio 0,45 s en --saltando.) */
    opacity var(--viaje) ease;
}

/* LA WEB DENTRO DEL MARCO: deja arriba la franja de los tres puntos y un
   filo a los lados (medido: 7 px de 1817 a cada lado y 54 de 1092 arriba).
   `cover` porque las tres webs no tienen la misma proporcion, y lo que
   manda es la de arriba de la pagina. */
.escena__ventana img {
  position: absolute;
  left: 0.41%;
  top: 4.99%;
  width: 99.17%;
  height: 94.87%;
  object-fit: cover;
  object-position: top;
  border-radius: 1.2cqw;
  transition: border-radius var(--viaje) var(--curva);
}

.escena__punto {
  position: absolute;
  top: 0.5cqw;
  width: 0.9cqw;
  height: 0.9cqw;
  border: 1px solid #d1d1d1;
  border-radius: 50%;
  background: #fafafa;
  transition: opacity var(--viaje) var(--curva);
}

.escena__punto:nth-of-type(1) { left: 1.45cqw; }
.escena__punto:nth-of-type(2) { left: 2.6cqw; }
.escena__punto:nth-of-type(3) { left: 3.75cqw; }

/* EN EL CENTRO: el marco entero. Sin sombra propia: el resplandor azul es
   `.escena__resplandor`, que se queda quieto detras del marco. */
.escena__ventana[data-pos="centro"] {
  z-index: 3;
  left: 20.94%;
  top: 18.86%;
  width: 56.57%;
  height: 61.76%;
  background-color: #fff;
}

/* EL RESPLANDOR DE DETRAS DEL MARCO, del color de la tienda que esta en
   el (05/10): cada web lo tiñe con su color principal, sacado de medir su
   captura —el naranja de KAYO, el arena de ALORA, el azul petroleo de NAVA—.
   Lo dice `data-tono` en la escena; lo cambia escena.js con el panel de IA.
   ── COMO CAMBIA DE COLOR SIN SALTAR ─────────────────────────────────
   Un degradado no se anima, pero un color REGISTRADO si (@property): el
   degradado se vuelve a pintar con el color de cada fotograma y el tono
   pasa de uno a otro en el mismo viaje que las webs. Donde no hay
   @property, cambia de golpe, que tampoco rompe nada.
   ── POR QUE UN DEGRADADO Y NO LA SOMBRA DEL MARCO ───────────────────
   Era un box-shadow ajustado a la imagen original (6,23 cqw de difuminado),
   y el 05/10 se pidio dos veces mas grande. Con difuminados tan grandes el
   navegador pinta la sombra POR TROZOS y deja saltos rectos —medido: 4
   niveles de golpe en una columna—. Un degradado eliptico es liso por
   construccion, ocupe lo que ocupe.
   VA APARTE DEL MARCO y no en el: asi se queda quieto mientras las webs
   cambian de sitio, y queda por encima de las tarjetas de los lados (que
   se tinyen cerca del marco, como en la imagen original) y por debajo de
   la del centro. */
@property --tono {
  syntax: '<color>';
  inherits: true;
  initial-value: rgb(50 103 196);
}

.escena[data-tono="kayo"]  { --tono: rgb(236 152 112); }
.escena[data-tono="alora"] { --tono: rgb(176 142 104); }
.escena[data-tono="nava"]  { --tono: rgb(47 112 156); }
.escena[data-tono="lume"]  { --tono: rgb(136 168 92); }

.escena__resplandor {
  position: absolute;
  z-index: 2;
  left: 1.2%;
  top: -28.3%;
  width: 96%;
  height: 156%;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--tono) 30%, transparent) 45%,
    color-mix(in srgb, var(--tono) 16%, transparent) 68%,
    color-mix(in srgb, var(--tono) 5%, transparent) 86%,
    transparent 100%
  );
  transition: --tono var(--viaje) var(--curva);
  pointer-events: none;
}

/* A LOS LADOS: sin marco, mas pequenias, al fondo y desenfocadas. La caja
   se calcula para que la WEB caiga justo donde caia la tarjeta de la
   imagen original (la web ocupa el 99,17 x 94,87 % de su ventana). */
.escena__ventana[data-pos="izquierda"],
.escena__ventana[data-pos="derecha"],
.escena__ventana[data-pos="espera"] {
  z-index: 1;
  width: 25.9%;
  height: 31.45%;
  top: 34.63%;
  background-color: rgb(255 255 255 / 0);
  filter: blur(0.62cqw);
}

/* INCLINADAS (05/10, pedido): cada una gira sobre su eje vertical con el
   borde de DENTRO —el que toca el marco— hacia delante y el de fuera
   alejandose. Primero se hizo al reves y se pidio darles la vuelta. Al
   entrar al marco se endereza (el centro no lleva giro). */
.escena__ventana[data-pos="izquierda"] {
  left: 1.14%;
  transform: rotateY(-15deg);
  /* Un punto mas apagada que la derecha, como venia en la imagen fija. */
  opacity: 0.92;
}

.escena__ventana[data-pos="derecha"],
.escena__ventana[data-pos="espera"] {
  left: 71.28%;
  transform: rotateY(15deg);
}

/* EN ESPERA (05/10, cuarta tienda): hay cuatro webs y tres sitios, asi que
   una aguarda su turno escondida justo donde va a aparecer —el sitio de la
   derecha— y desde ahi solo se enciende. */
.escena__ventana[data-pos="espera"] {
  opacity: 0;
}

.escena__ventana[data-pos="izquierda"] img,
.escena__ventana[data-pos="derecha"] img,
.escena__ventana[data-pos="espera"] img {
  border-radius: 0.3cqw;
}

.escena__ventana[data-pos="izquierda"] .escena__punto,
.escena__ventana[data-pos="derecha"] .escena__punto,
.escena__ventana[data-pos="espera"] .escena__punto {
  opacity: 0;
}

/* LA QUE DA LA VUELTA —de la izquierda a la derecha— no cruza la escena:
   se desvanece donde esta, salta y reaparece. Mientras salta, solo se
   anima su opacidad. Lo orquesta escena.js. */
.escena__ventana.escena__ventana--saltando {
  opacity: 0;
  transition: opacity 0.45s ease;
}

/* EL CHAT DE IA, delante de todo y QUIETO, como en el video. Su imagen
   trae el blanco translucido y el canto; el CRISTAL —que lo de detras se
   vea esmerilado— lo pone el backdrop-filter de esta caja, con el mismo
   radio que la imagen (41 px de 537 x 733). */
.escena__ia {
  position: absolute;
  z-index: 4;
  left: 63.39%;
  top: 30.54%;
  width: 16.72%;
  border-radius: 7.6% / 5.6%;
  -webkit-backdrop-filter: blur(0.9cqw) saturate(1.3);
  backdrop-filter: blur(0.9cqw) saturate(1.3);
  box-shadow: 0 0.6cqw 1.8cqw -0.6cqw rgb(0 0 0 / 0.18);
}

.escena__ia img {
  display: block;
  width: 100%;
  height: auto;
}

/* UN PANEL POR TIENDA, uno encima de otro: se funde el de la tienda que
   entra al marco. El primero da la altura a la caja; los demas van encima. */
.escena__ia-panel {
  transition: opacity 0.45s ease;
}

.escena__ia-panel + .escena__ia-panel {
  position: absolute;
  inset: 0;
}

.escena__ia-panel:not(.is-activo) {
  opacity: 0;
}

/* La imagen de movil, solo en movil (sus reglas, en el bloque de abajo). */
.inicio__imagen {
  display: none;
}

/* El formulario del correo es solo del movil: en ordenador manda el boton.
   Y los textos que solo existen en movil, igual. */
.inicio__formulario,
.solo-movil {
  display: none;
}

/* ── MOVIL ─────────────────────────────────────────────────────────
   Con su propia referencia (05/10, segunda version): en la barra solo
   «Precios» y «Contáctanos»; textos propios (ver .solo-movil); el correo
   con «Crear cuenta» y una nota; y su propia imagen (start-img-movil.png).
   LOS NUMEROS SALEN DE MEDIR ESA REFERENCIA, que trae la pagina a 383,5
   px: aqui van llevados a 390, el ancho de referencia de un movil.
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .solo-ordenador {
    display: none;
  }

  .solo-movil {
    display: inline;
  }

  .barra {
    height: 70px;
    padding: 21.5px 15.8px 0 20.3px;
  }

  .barra__logo {
    margin-top: -6px;
  }

  .barra__logo img {
    height: 39.7px;
  }

  .barra__nav {
    gap: 0;
  }

  .barra__enlace {
    margin-right: 18.3px;
    font-size: 14px;
  }

  .boton {
    height: 34.6px;
    font-size: 16px;
  }

  .boton--claro {
    width: 113px;
  }

  /* «Descuento» no sale en movil: el correo de abajo ya es la puerta. */
  .boton--oscuro {
    display: none;
  }

  /* SIN FONDO PROPIO: el azul muy claro de alrededor de la imagen lo trae
     la propia imagen, que lo desvanece hasta cero en sus bordes.
     `overflow-x: clip` recorta la imagen, que es mas ancha que la
     pantalla, sin crear una barra de desplazamiento lateral. */
  /* EN MOVIL LA PORTADA NO SE DESLIZA (05/10, pedido): todo el inicio cabe
     en la pantalla. El alto maximo es el de la pantalla menos la barra
     (`svh`: el alto con las barras del navegador a la vista, que es el que
     no salta al deslizar), y lo que sobre de la imagen se recorta por
     abajo. `overflow: clip` y no `hidden`: recorta sin crear una caja que
     se pueda deslizar por dentro.
     DESDE EL 12/10 HAY MAS SECCIONES DEBAJO y la pagina SI se desliza: el
     tope se queda porque el inicio sigue ocupando justo la primera
     pantalla, y lo demas viene despues (ia.css, datos.css, faq.css,
     pie.css; «Pruebalo» sigue sin salir). */
  .inicio {
    max-height: calc(100svh - 70px);
    padding: 34px 14.7px 0 17.3px;
    overflow: clip;
  }

  /* EN PROPORCION A LA PANTALLA: 40 px a 390 de ancho, para que las tres
     lineas escritas quepan siempre sin partirse otra vez. Y un poco a la
     izquierda, que es como cae en la referencia. */
  .inicio__titulo {
    margin: 0 7.6px 0 -7.6px;
    font-size: 10.28vw;
    line-height: 1.2;
  }

  .inicio__salto,
  .inicio__accion {
    display: none;
  }

  .inicio__lema {
    margin-top: 14px;
    font-size: 4.45vw;
    line-height: 1.26;
  }

  .inicio__formulario {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    margin-top: 38px;
    text-align: left;
  }

  .inicio__etiqueta {
    margin: 0 0 5px 12px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
  }

  .inicio__correo {
    height: 42.7px;
    padding: 0 24.4px;
    border: 1px solid #c9c9c9;
    border-radius: 999px;
    background: #fff;
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.05);
    color: var(--tinta);
    font: inherit;
    font-size: 16.5px;
    outline: none;
  }

  .inicio__correo::placeholder {
    color: #969696;
  }

  .inicio__correo:focus {
    border-color: #397ef8;
  }

  /* EL AZUL ES EL DE LA CASA (--azul-relleno, #397ef8), con el relieve de
     la referencia: un canto azul mas oscuro, una linea de luz por dentro
     arriba y una banda mas oscura por dentro abajo. */
  .inicio__enviar {
    height: 44.7px;
    margin-top: 11.2px;
    border: 1px solid #3567c9;
    border-radius: 999px;
    background: #397ef8;
    box-shadow:
      inset 0 1px 0 0 rgb(255 255 255 / 0.4),
      inset 0 -2px 0 0 rgb(40 70 150 / 0.45);
    color: #fff;
    font: inherit;
    font-size: 19px;
    cursor: pointer;
  }

  .inicio__nota {
    margin: 7px 4.5px 0 -4.5px;
    font-size: 14.2px;
    text-align: center;
  }

  /* LA IMAGEN DE MOVIL: el 126,6 % del ancho y corrida a la izquierda, que
     es como cae en la referencia (medido por correlacion: 0,996). Sube por
     debajo de la nota porque arriba solo trae resplandor transparente. */
  .escena {
    display: none;
  }

  .inicio__imagen {
    display: block;
    align-self: flex-start;
    max-width: none;
    height: auto;
    width: 126.6vw;
    margin: -21px 0 0 calc(-17.3px - 8.6vw);
    /* SU MARGEN DE ABAJO NO OCUPA SITIO: los ultimos 125 px de los 1102 del
       archivo son resplandor por debajo del 3 % —no se ve— y bastaban para
       que la pagina midiera 17 px mas que un movil de 844. 125/1411 del
       ancho de la imagen (126,6vw) son 11,2vw. */
    margin-bottom: -11.2vw;
  }
}

/* EN LOS MOVILES MAS ESTRECHOS NO CABEN LOS TRES de la barra: se retira
   «Precios», que es el unico que tiene otra puerta mas abajo. */
@media (max-width: 359px) {
  .barra__enlace {
    display: none;
  }
}