/* AuditiAI · portada de ingreso del 19/09/2026 (bandera PORTADA_NUEVA).
 *
 * Hoja propia de esta pantalla: no la carga ninguna otra y no toca la entrada L02 (entrada.css). Referencia:
 * «Diseño/login/referencia_portada_19sep.png». Colores y contrastes medidos: hoja de paleta bloqueada, «2 quater».
 *
 *   tinta 4D4F53 · secundario 5F5F6A (6,31 a 1 sobre blanco) · «AI» B47C03 (no D49F0B: 2,40 a 1) · apoyo C3C8C8
 *   botón: relieve de 5A5D62 a 3E4044 con letra blanca, que se mide contra la parada más clara del degradado
 *
 * Todo el contenido va en flujo normal (flex). Las únicas capas colocadas son la fotografía y su velo, decorativas.
 * El aro de cristal y la línea de indicadores vienen DENTRO de la fotografía actual: aquí no se tapan con parches; el
 * velo blanco central es el que pide la especificación para leer el texto. Con la fotografía limpia basta con cambiar
 * los cuatro archivos de fondo: esta hoja no cambia.
 */
@font-face { font-family: "Carlito"; src: url("/estatico/fuentes/Carlito-Regular.woff2") format("woff2"), url("/estatico/fuentes/Carlito-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Carlito"; src: url("/estatico/fuentes/Carlito-Bold.woff2") format("woff2"), url("/estatico/fuentes/Carlito-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

.portada-cuerpo { margin: 0; background: #E9EBEF; }

.portada {
  --tinta: #4D4F53;
  --secundario: #5F5F6A;          /* 19/09: era 73737D (4,69 a 1 sobre blanco); este da 6,31 y aguanta el velo al 42 % */
  --apoyo: #C3C8C8;
  --ocre-ai: #8F6B07;   /* Orden D52, P13: el color del Manual de Marca, el mismo que el «AI» de la cabecera (antes B47C03) */
  --robot: 420px;                 /* lienzo del PNG; el personaje ocupa el 78,4 % del alto, unos 329 px (tercera pasada) */
  --robot-hueco: 10.8%;           /* margen transparente del PNG por arriba y por abajo */
  position: relative; isolation: isolate;
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column;
  font-family: "Carlito", Calibri, sans-serif;
  color: var(--tinta);
  /* «clip» en los dos ejes: recorta los VELOS, que son adornos absolutos y se salen a propósito para desvanecerse, sin
     recortar el contenido, que va en flujo y hace crecer este mismo elemento. Sin esto los velos agrandaban el documento y
     creaban desplazamiento vertical. Si algún día el contenido no cabe, el desplazamiento lo da el documento, no esto. */
  overflow: clip;
}
.portada *, .portada *::before, .portada *::after { box-sizing: border-box; }

/* ------------------------------------------------------------------ A · fotografía y velo (decorativos) */
.portada-foto, .portada-velo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.portada-foto {
  background-color: #E9EBEF;
  background-image: url("/estatico/fondo/fondo_login_1920.jpg");
  background-image: image-set(url("/estatico/fondo/fondo_login_1920.webp") type("image/webp"), url("/estatico/fondo/fondo_login_1920.jpg") type("image/jpeg"));
  background-size: cover; background-position: center center; background-repeat: no-repeat;
}
@media (max-width: 1280px) and (min-width: 768px) {
  .portada-foto {
    background-image: url("/estatico/fondo/fondo_login_1280.jpg");
    background-image: image-set(url("/estatico/fondo/fondo_login_1280.webp") type("image/webp"), url("/estatico/fondo/fondo_login_1280.jpg") type("image/jpeg"));
  }
}
/* La fotografía LIMPIA (sin aro ni línea de indicadores), cuando está en la carpeta de marca: la plantilla pone sus cuatro
   direcciones en variables y mandan sobre las de arriba. */
.portada[data-fondo="limpio"] .portada-foto { background-image: var(--foto-1920); }
@media (max-width: 1280px) and (min-width: 961px) { .portada[data-fondo="limpio"] .portada-foto { background-image: var(--foto-1280); } }
@media (max-width: 960px) and (min-width: 768px) { .portada[data-fondo="limpio"] .portada-foto { background-image: var(--foto-960); } }
@media (max-width: 767px) { .portada[data-fondo="limpio"] .portada-foto { background-image: var(--foto-vertical); } }
/* LA CAPA BLANCA, una sola y uniforme (19/09/2026, con la fotografía limpia). Antes hubo un velo general más tres velos
   locales, y eran necesarios porque la fotografía traía dentro el disco de cristal y la línea de indicadores, que obligaban
   a tapar. Con la fotografía limpia sobra todo eso: queda una única capa uniforme, sin degradados, sin elipses y sin nada
   que pueda dejar un canto. Si un texto no llegara a su contraste, lo que se sube es ESTA capa, no un velo por bloque.

   AL 28 %, SIN VELOS (20/09/2026). Con capa uniforme sola hacía falta el 88 % y la oficina se perdía. Ahora la
   capa baja al 48 % y la legibilidad la da UN velo local bajo el bloque de texto, con ocho paradas y un desvanecimiento que
   ocupa el 54 %% del radio (del 46 %% al 100 %%): así no puede verse ningún canto. Con la fotografía limpia ese velo ya no
   puede dibujar ningún arco, que era lo que se temía. Historia de por qué hizo falta: Se midió el barrido entero con la fotografía limpia ya puesta: al 42 % el «AI» da
   1,63 a 1 y la frase 2,34; al 70 %, 2,34 y 3,94; al 78 %, 2,65 y 4,52; al 88 % pasan todos, con el «AI» justo en 3,05. El
   eslabón débil es el ocre del «AI» (#B47C03), que sobre blanco PURO solo da 3,61 a 1: cualquier fondo que no sea casi
   blanco lo hunde. Se probaron también cuatro encuadres de la fotografía, para que el texto cayera sobre el mármol claro en
   vez del borde del escritorio, y el mejor dejaba el «AI» en 2,57. Sin velos locales y sin tocar ese color, 88 % es el
   mínimo que cumple. */
.portada-velo { background: rgba(255, 255, 255, 0.28); }

/* El bloque de texto: título, frase, botón y leyenda, uno debajo de otro. Al quitar los velos locales se fue con ellos esta
   regla y el botón y la leyenda quedaron en la misma línea (el botón y la leyenda son inline-flex). Lo vio la revisión en
   pantalla, no las medidas. */
.portada-texto { width: 100%; display: flex; flex-direction: column; align-items: center; }

/* SIN NINGUNA CAPA CON FORMA (20/09/2026). Hubo velos locales bajo el bloque de texto y bajo el encabezado, y se han
   quitado los dos. El del texto medía 240vw y el del encabezado 160vw: más anchos que la ventana, así que dentro de la
   pantalla NUNCA llegaban a transparente por los lados y solo se desvanecían arriba y abajo. Eso no es un velo suave: es
   una franja horizontal que cruza la pantalla. Ahora solo hay la fotografía y UNA capa blanca pareja encima; el contraste
   lo dan los propios textos, con un resplandor que sigue el contorno de cada letra y por eso no puede dibujar ninguna
   forma. Regla: ninguna capa de fondo con forma en esta pantalla, nunca más. */
.portada-texto { width: 100%; display: flex; flex-direction: column; align-items: center; }

/* ------------------------------------------------------------------ B · encabezado corporativo */
.portada-cabecera { flex: none; width: 100%; }
/* 20/09/2026: sin contenedor centrado. En pantalla ancha el logo quedaba despegado de la esquina; ahora va pegado al
   borde, a 40 px del izquierdo y 28 px de arriba (20 y 20 en celular). El bloque central sigue centrado. */
.portada-cabecera-caja { padding: 28px 40px; display: flex; align-items: center; gap: 16px; }
.portada-logo { flex: none; width: 56px; height: 56px; object-fit: contain; display: block; }
.portada-entidad { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.portada-grupo { font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--tinta); }
.portada-area { font-size: 14px; font-weight: 400; line-height: 1.3; color: var(--secundario); overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ C · bloque central, en flujo */
.portada-bloque {
  flex: 1 1 auto;
  width: 100%; max-width: 640px; margin: 0 auto;
  padding: 0 24px max(40px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}

/* 1 · robot: la caja mide lo que el lienzo del PNG; los márgenes negativos descuentan su transparencia (10,8 % arriba y
   abajo) para que el título quede a 16 px del personaje y no del borde del archivo. */
.portada-robot {
  position: relative;
  flex: none; width: var(--robot); height: var(--robot);
  margin-top: calc(var(--robot) * -0.108 + 8px);
  margin-bottom: calc(var(--robot) * -0.108 + 16px);
}
.portada-robot img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  animation: portada-flota 3.2s ease-in-out infinite;
  will-change: transform;
}
/* La sombra de piso. El PNG no trae ninguna (se comprobó: todo lo suyo es opaco), así que sin esto el robot flota sin
   apoyo. Va bajo los pies del personaje, que acaban al 89,2 % de la caja, y se mueve EN FASE con él: cuando sube, encoge al
   82 % y pierde opacidad. Es lo que hace que el movimiento se lea como altura y no como un dibujo que resbala. */
.portada-robot::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 88%;
  width: 48%; height: 7.5%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(46,48,52,0.30) 0%, rgba(46,48,52,0.18) 45%, rgba(46,48,52,0) 100%);
  animation: portada-sombra 3.2s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes portada-flota {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3%); }
}
@keyframes portada-sombra {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50% { transform: translate(-50%, -50%) scale(0.82); opacity: 0.55; }
}

/* EL RESPLANDOR DE LOS TEXTOS. Sustituye a los velos: es la técnica de siempre para texto sobre fotografía. Al seguir el
   contorno de cada letra no puede producir ninguna franja ni ninguna forma geométrica, que es justo lo que pasaba antes.
   Si un texto no llega a su mínimo se sube el radio y la opacidad del SUYO, nunca se vuelve a poner una capa con forma. */
.portada-nombre {
  text-shadow:
    0 0 2px rgba(255,255,255,1),
    0 0 2px rgba(255,255,255,1),
    0 0 2px rgba(255,255,255,1),
    0 0 3px rgba(255,255,255,1),
    0 0 3px rgba(255,255,255,1),
    0 0 4px rgba(255,255,255,1),
    0 0 5px rgba(255,255,255,1),
    0 0 7px rgba(255,255,255,1),
    0 0 14px rgba(255,255,255,1),
    0 0 28px rgba(255,255,255,1),
    0 0 46px rgba(255,255,255,0.75);
}
/* El «AI» va en el ocre B47C03, que sobre blanco PURO solo da 3,61 a 1: es el más frágil de la pantalla y su color no se
   toca. Lleva el resplandor más ancho de todos, hasta 50 px. */
.portada-ai {
  text-shadow:
    0 0 2px rgba(255,255,255,1),
    0 0 2px rgba(255,255,255,1),
    0 0 2px rgba(255,255,255,1),
    0 0 2px rgba(255,255,255,1),
    0 0 3px rgba(255,255,255,1),
    0 0 3px rgba(255,255,255,1),
    0 0 3px rgba(255,255,255,1),
    0 0 4px rgba(255,255,255,1),
    0 0 5px rgba(255,255,255,1),
    0 0 6px rgba(255,255,255,1),
    0 0 8px rgba(255,255,255,1),
    0 0 10px rgba(255,255,255,1),
    0 0 18px rgba(255,255,255,1),
    0 0 34px rgba(255,255,255,1),
    0 0 50px rgba(255,255,255,1);
}
.portada-leyenda, .portada-grupo, .portada-area {
  text-shadow:
    0 0 2px rgba(255,255,255,1),
    0 0 2px rgba(255,255,255,1),
    0 0 2px rgba(255,255,255,1),
    0 0 3px rgba(255,255,255,1),
    0 0 3px rgba(255,255,255,1),
    0 0 4px rgba(255,255,255,1),
    0 0 5px rgba(255,255,255,1),
    0 0 7px rgba(255,255,255,1),
    0 0 12px rgba(255,255,255,1),
    0 0 24px rgba(255,255,255,1),
    0 0 40px rgba(255,255,255,0.8);
}
/* La frase institucional cae justo sobre el borde del escritorio, que es la zona de más contraste de la
   fotografía: lleva el resplandor más fuerte de los textos secundarios. */
.portada-frase {
  text-shadow:
    0 0 2px rgba(255,255,255,1),
    0 0 2px rgba(255,255,255,1),
    0 0 2px rgba(255,255,255,1),
    0 0 2px rgba(255,255,255,1),
    0 0 3px rgba(255,255,255,1),
    0 0 3px rgba(255,255,255,1),
    0 0 4px rgba(255,255,255,1),
    0 0 5px rgba(255,255,255,1),
    0 0 7px rgba(255,255,255,1),
    0 0 14px rgba(255,255,255,1),
    0 0 28px rgba(255,255,255,1),
    0 0 44px rgba(255,255,255,0.85);
}

/* 2 · nombre */
.portada-nombre { margin: 0; font-size: 48px; font-weight: 700; line-height: 1.1; letter-spacing: 0; }
.portada-auditi { color: var(--tinta); }
.portada-ai { color: var(--ocre-ai); }

/* 3 · frase */
.portada-frase { margin: 8px 0 0; font-size: 20px; font-weight: 400; line-height: 1.4; color: var(--secundario); }

/* 4 · botón de Microsoft: un enlace con forma de botón; el relieve es CSS, no una imagen */
.portada-boton {
  margin-top: 24px;
  width: 360px; max-width: 100%; min-height: 56px;
  padding: 16px 24px;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  border: 0; border-radius: 10px;
  color: #FFFFFF; text-decoration: none;
  font-family: inherit; font-size: 18px; font-weight: 700; line-height: 1.2;
  /* El volumen sale de tres cosas, y ninguna sobra: el degradado lineal de tres paradas da el cuerpo (claro arriba, medio
     al centro, oscuro abajo); el radial de arriba es el reflejo de luz, y por eso arranca en el borde superior; y las
     sombras van en tres capas, contacto, media y ambiente, porque una sola sombra es justo lo que hace que un botón se vea
     plano. Las dos internas son el filo de luz de arriba y el filo oscuro de abajo. */
  /* 20/09/2026: CUATRO paradas en el degradado lineal, no tres. El salto de claro a oscuro es lo que da el cuerpo; con
     tres el botón se leía plano. El filo oscuro interior sube a 0,38, que es lo que marca el borde de abajo, y la sombra
     de ambiente crece a 14 px de desplazamiento y 28 de desenfoque para despegarlo del fondo. */
  background:
    radial-gradient(130% 150% at 50% -10%,
      rgba(255,255,255,0.22) 0%,
      rgba(255,255,255,0.06) 32%,
      rgba(255,255,255,0) 58%),
    linear-gradient(180deg,
      #6A6D73 0%,
      #55585D 30%,
      #46484D 68%,
      #35373B 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.38),
    inset 0 -2px 0 rgba(0,0,0,0.38),
    inset 0 0 0 1px rgba(255,255,255,0.06),
    0 1px 2px rgba(18,20,23,0.28),
    0 5px 8px rgba(18,20,23,0.22),
    0 14px 28px rgba(18,20,23,0.26);
  text-shadow: 0 1px 1px rgba(0,0,0,0.30);
  transition: transform 140ms ease-out, box-shadow 140ms ease-out, background 140ms ease-out;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.portada-ms { flex: none; width: 24px; height: 24px; border-radius: 5px; background: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; }
.portada-ms svg { width: 15px; height: 15px; display: block; }
.portada-rotulo { white-space: nowrap; }
/* Al pasar el cursor sube 1 px, las sombras exteriores crecen y el reflejo de arriba se aclara un punto. Ni el ancho ni la
   escala cambian. Al pulsar baja 1 px y las exteriores se reducen casi a la de contacto: se siente hundido. */
@media (hover: hover) and (pointer: fine) {
  .portada-boton:hover {
    transform: translateY(-1px);
    background:
      radial-gradient(130% 150% at 50% -10%, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.08) 32%, rgba(255,255,255,0) 58%),
      linear-gradient(180deg, #6E7178 0%, #595C61 30%, #494B50 68%, #35373B 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.42), inset 0 -2px 0 rgba(0,0,0,0.38), inset 0 0 0 1px rgba(255,255,255,0.07),
      0 1px 2px rgba(18,20,23,0.30), 0 7px 11px rgba(18,20,23,0.24), 0 18px 34px rgba(18,20,23,0.28);
  }
}
.portada-boton:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.24), inset 0 -2px 0 rgba(0,0,0,0.42), inset 0 0 0 1px rgba(255,255,255,0.06),
    0 1px 2px rgba(18,20,23,0.30), 0 2px 4px rgba(18,20,23,0.18);
}
.portada-boton:focus-visible { outline: 3px solid #4D4F53; outline-offset: 3px; }
.portada-boton[aria-busy="true"] { cursor: progress; }

/* 5 · leyenda: no es un enlace ni un botón */
.portada-leyenda { margin: 24px 0 0; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.3; color: var(--secundario); }
/* Orden D51, C.4 (contraste AA en todo): «Acceso corporativo seguro» daba 4,37 a 1 sobre la foto (evaluador 3, P12 del juez).
   Solo sube el color de la letra, a la tinta de la piel final (323840, 11,8 a 1 sobre blanco): más oscuro que 5F5F6A, así
   que el contraste solo puede subir. El texto no cambia; la línea nueva que propone P12 queda para Jeysev. La portada no es
   una piel: se sirve antes de entrar, con su propia bandera (PORTADA_NUEVA), y las pieles 0 y 1 no la usan. */
.portada-leyenda { color: #323840; }
/* Orden D52, P12: la línea que dice qué hace la herramienta. Tinta 323840 (11,8 a 1 sobre blanco) con el mismo resplandor
   blanco que la leyenda: va sobre la foto, y el resplandor es lo que da el contraste en la zona oscura (memoria del 20/09). */
.portada-que-hace {
  margin: 12px 0 0; max-width: 420px; font-size: 16px; font-weight: 600; line-height: 1.4; color: #323840;
  text-shadow:
    0 0 2px rgba(255,255,255,1),
    0 0 2px rgba(255,255,255,1),
    0 0 2px rgba(255,255,255,1),
    0 0 3px rgba(255,255,255,1),
    0 0 3px rgba(255,255,255,1),
    0 0 4px rgba(255,255,255,1),
    0 0 5px rgba(255,255,255,1),
    0 0 7px rgba(255,255,255,1),
    0 0 12px rgba(255,255,255,1),
    0 0 24px rgba(255,255,255,1),
    0 0 40px rgba(255,255,255,0.8);
}
/* en el celular la foto vertical tiene puntos más oscuros detrás de la línea (evaluador 3: 4,34 a 1 en el 0,2 % del fondo):
   el mismo resplandor reforzado que lleva el lema en ese ancho */
@media (max-width: 767px) {
  .portada-que-hace {
    font-size: 15px; max-width: 320px;
    text-shadow:
      0 0 2px rgba(255,255,255,1),
      0 0 2px rgba(255,255,255,1),
      0 0 2px rgba(255,255,255,1),
      0 0 2px rgba(255,255,255,1),
      0 0 2px rgba(255,255,255,1),
      0 0 3px rgba(255,255,255,1),
      0 0 3px rgba(255,255,255,1),
      0 0 3px rgba(255,255,255,1),
      0 0 4px rgba(255,255,255,1),
      0 0 5px rgba(255,255,255,1),
      0 0 6px rgba(255,255,255,1),
      0 0 9px rgba(255,255,255,1),
      0 0 16px rgba(255,255,255,1),
      0 0 30px rgba(255,255,255,1),
      0 0 48px rgba(255,255,255,0.9);
  }
}
.portada-candado { flex: none; width: 18px; height: 18px; color: var(--tinta); }

/* ------------------------------------------------------------------ celular: menos de 768 px */
@media (max-width: 767px) {
  .portada { --robot: 300px; }
  .portada-foto {
    background-image: url("/estatico/fondo/fondo_login_vertical_1080.jpg");
    background-image: image-set(url("/estatico/fondo/fondo_login_vertical_1080.webp") type("image/webp"), url("/estatico/fondo/fondo_login_vertical_1080.jpg") type("image/jpeg"));
  }
    .portada-cabecera-caja { padding: 20px; gap: 12px; }
  .portada-logo { width: 44px; height: 44px; }
  .portada-grupo { font-size: 18px; }
  .portada-area { font-size: 13px; }
  .portada-bloque { padding-top: 16px; }
  .portada-nombre { font-size: 36px; line-height: 1.15; }
  .portada-frase { font-size: 17px; max-width: 300px; }
  /* En celular la frase cae sobre una zona más oscura de la fotografía vertical y se quedaba en 4,17 a 1. Su resplandor
     sube solo aquí; en escritorio da 5,58 y no hace falta. */
  .portada-frase {
    text-shadow:
      0 0 2px rgba(255,255,255,1),
      0 0 2px rgba(255,255,255,1),
      0 0 2px rgba(255,255,255,1),
      0 0 2px rgba(255,255,255,1),
      0 0 2px rgba(255,255,255,1),
      0 0 3px rgba(255,255,255,1),
      0 0 3px rgba(255,255,255,1),
      0 0 3px rgba(255,255,255,1),
      0 0 4px rgba(255,255,255,1),
      0 0 5px rgba(255,255,255,1),
      0 0 7px rgba(255,255,255,1),
      0 0 9px rgba(255,255,255,1),
      0 0 16px rgba(255,255,255,1),
      0 0 30px rgba(255,255,255,1),
      0 0 48px rgba(255,255,255,0.9);
  }
  .portada-frase span { display: block; }
  .portada-boton { width: 100%; max-width: 360px; font-size: 17px; }
  .portada-leyenda { font-size: 13px; }
}

/* ------------------------------------------------------------------ poca altura: primero se encogen espacios y robot */
/* Con el robot a 340 px el conjunto pide más alto. Primero se recortan los espacios, como manda el criterio: el robot no se
   toca. */
@media (max-height: 1000px) {
  .portada-cabecera-caja { padding-top: 20px; padding-bottom: 18px; }
  .portada-bloque { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  .portada-robot { margin-top: calc(var(--robot) * -0.108); }
}
@media (max-height: 880px) {
  .portada-cabecera-caja { padding-top: 14px; padding-bottom: 12px; }
  .portada-boton { margin-top: 20px; }
  .portada-leyenda { margin-top: 18px; }
}
@media (max-height: 760px) {
  .portada { --robot: 248px; }
  .portada-cabecera-caja { padding-top: 20px; padding-bottom: 12px; }
}
@media (max-height: 760px) and (max-width: 767px) { .portada { --robot: 224px; } }
@media (max-height: 599px) {
  .portada { --robot: 140px; }
  .portada-bloque { justify-content: flex-start; padding-top: 8px; }
  .portada-cabecera-caja { padding-top: 12px; padding-bottom: 8px; }
  .portada-boton { margin-top: 16px; }
  .portada-leyenda { margin-top: 16px; }
}

/* ------------------------------------------------------------------ movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  .portada-robot img, .portada-robot::after { animation: none; will-change: auto; }
  .portada-boton { transition: none; }
  .portada-boton:hover, .portada-boton:active { transform: none; }
}