/* =========================================================================
   Bluecell · Diagnóstico de crecimiento
   Una sola tipografia, Helvetica Neue, servida desde el propio proyecto
   para que se vea igual en cualquier dispositivo. El contraste se hace
   con los pesos, nunca con una segunda familia.
   Azul #283AFE sobre negro #000002.

   Los archivos woff2 estan recortados al alfabeto latino y a la puntuacion
   que usa la pagina. Pesan alrededor de veinte kilobytes cada uno en vez de
   los varios cientos del TTF original.
   ========================================================================= */

@font-face {
  font-family: 'Helvetica Neue Web';
  src: url('../fonts/HelveticaNeue-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue Web';
  src: url('../fonts/HelveticaNeue-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue Web';
  src: url('../fonts/HelveticaNeue-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue Web';
  src: url('../fonts/HelveticaNeue-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
:root {
  --negro: #000002;
  --negro-02: #0B0D1C;
  --azul: #283AFE;
  --azul-oscuro: #2231D8;
  /* El azul de marca sobre negro puro se queda en 3,1 de contraste, que
     vale para un titular grande pero no para leer un enlace de 14px.
     Esta version aclarada llega a 5,0 y se usa solo en texto pequeno. */
  --azul-texto: #5E6BFE;
  --blanco: #FFFFFF;
  --blanco-02: #F2F2F2;
  --gris-80: #39424A;
  --gris-50: #83898E;
  --neutro-20: #CDD0D2;
  --neutro-40: #9CA1A5;
  --linea: rgba(255, 255, 255, 0.12);

  /* Superficies del diagnostico. Toda la pagina es oscura, asi que las
     tarjetas se despegan del fondo subiendo de tono, no con sombra: sobre
     negro puro una sombra no se ve. */
  --tarjeta:      #0B0D1C;
  --tarjeta-alta: #12152A;
  --rojo:         #FF5A5A;
  --rojo-texto:   #FF8A8A;
  /* El nombre lleva "Web" a proposito. Asi se usa siempre el archivo que
     sirve el proyecto y nunca la version que el dispositivo tenga instalada,
     que en Mac y en Windows no es la misma. */
  --sans: 'Helvetica Neue Web', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --radio: 14px;
  --ancho: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--negro);
  color: var(--blanco);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }
.contenedor-estrecho { max-width: 720px; transition: max-width 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
/* El formulario se lee mejor estrecho, pregunta a pregunta. El informe
   final necesita justo lo contrario: sitio para repartir trece hallazgos
   en columnas y ahorrarle a la persona media pantalla de scroll. */
.contenedor-estrecho.contenedor-ancho { max-width: var(--ancho); }

a { color: var(--azul-texto); }

/* --------------------------------- CABECERA ----------------------------- */

.cabecera {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  background: rgba(0, 0, 2, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linea);
}
/* El ancho iguala al que tenia el texto "Bluecell." de la version anterior.
   Cambia solo esta linea para agrandar o reducir el logotipo. */
.marca { display: block; --ancho-logo: 83px; }
.marca img {
  display: block;
  width: var(--ancho-logo);
  height: auto;
}
.cabecera-nota { font-size: 13px; color: var(--neutro-40); letter-spacing: 0.4px; }

/* --------------------------------- PORTADA ------------------------------ */

.portada { position: relative; padding: 108px 0 92px; overflow: hidden; }

/* La foto se ancla a la derecha porque el texto ocupa la izquierda: asi las
   caras caen en la mitad despejada y no debajo del titular.

   Es una foto de grupo de 1.80 de proporcion, mas apaisada que el hueco. En
   pantalla ancha el recorte es vertical y se ve el equipo entero de lado a
   lado, asi que el 72% no hace nada. Solo entra en juego cuando la ventana se
   estrecha, y entonces es cuando interesa que muerda por la izquierda, que es
   justo donde el velo tapa. */
.portada-imagen {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 72% 42%;
  pointer-events: none;
}

/* Dos veladuras superpuestas. La horizontal oscurece el lado del texto y
   deja respirar la foto a la derecha. La vertical funde el pie de la
   seccion con el negro de la pagina, para que no haya un corte seco. */
.portada-velo {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(95deg,
      rgba(0, 0, 2, 0.97) 0%,
      rgba(0, 0, 2, 0.94) 46%,
      rgba(0, 0, 2, 0.66) 74%,
      rgba(0, 0, 2, 0.50) 100%),
    linear-gradient(to top, var(--negro) 2%, rgba(0, 0, 2, 0) 42%);
}

.portada-fondo {
  position: absolute; inset: -40% 20% auto -20%; height: 720px;
  background: radial-gradient(circle at 30% 30%, rgba(40, 58, 254, 0.28), transparent 62%);
  filter: blur(30px); pointer-events: none;
}
.portada-cuerpo { position: relative; }

/* La pastilla se anima para que el ojo pase por ella antes de bajar al
   titular. Son dos gestos sumados y los dos muy contenidos: un latido del
   borde y un destello que la barre cada pocos segundos.
   `isolation` encierra el destello dentro de la pastilla, para que quede
   detras del texto pero delante de su propio fondo. */
.antetitulo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-block; margin: 0 0 22px;
  padding: 7px 15px; border: 1px solid var(--linea); border-radius: 999px;
  font-size: 13px; letter-spacing: 0.6px; color: var(--neutro-20);
  animation: latido 4.8s ease-in-out infinite;
}

.antetitulo::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(
    100deg,
    transparent 40%,
    rgba(40, 58, 254, 0.26) 48%,
    rgba(255, 255, 255, 0.16) 52%,
    transparent 60%
  );
  transform: translateX(-130%);
  /* El barrido ocupa el ultimo tercio del ciclo: el resto del tiempo la
     pastilla esta quieta, que es lo que evita que canse. */
  animation: barrido 4.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes latido {
  0%, 62%, 100% { border-color: var(--linea); }
  80%           { border-color: rgba(40, 58, 254, 0.42); }
}

@keyframes barrido {
  0%, 62%  { transform: translateX(-130%); }
  100%     { transform: translateX(130%); }
}

/* Tres lineas fijas. Sin ancho maximo: con los saltos escritos a mano, el
   bloque ya lo define la linea mas larga, y un tope solo podria partirla.
   El minimo baja a 32px para que "o es crecimiento," entre entera incluso
   en un telefono de 320px. */
.titular {
  margin: 0 0 24px;
  font-size: clamp(32px, 8vw, 68px);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -2px;
}
/* La segunda linea contrasta por peso, no por familia: la primera va en
   Bold y esta en Light, las dos Helvetica Neue.
   Usa el azul aclarado y no el de marca porque va sobre la foto: el de
   marca se quedaba en 2,0 de contraste y costaba leerlo. */
.titular em {
  font-style: normal;
  font-weight: 300;
  color: var(--azul-texto);
}

.entradilla {
  margin: 0 0 34px; max-width: 56ch;
  font-size: clamp(17px, 2.2vw, 20px); color: var(--neutro-20);
}

.senales {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  margin: 32px 0 0; padding: 0; list-style: none;
  font-size: 14px; color: var(--gris-50);
}
.senales li { position: relative; padding-left: 18px; }
.senales li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--azul);
}

/* --------------------------------- BOTONES ------------------------------ */

.boton {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 17px 34px; border: 0; border-radius: 999px;
  font-family: var(--sans); font-size: 16px; font-weight: 500;
  text-decoration: none; cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, opacity 0.2s ease;
}
.boton-principal { background: var(--azul); color: var(--blanco); }
.boton-principal:hover { background: var(--azul-oscuro); transform: translateY(-2px); }
.boton-principal:disabled { opacity: 0.5; cursor: wait; transform: none; }
.boton-avanzar { margin-top: 28px; }
.boton-enviar { width: 100%; margin-top: 28px; }

/* --------------------------------- MARCAS ------------------------------- */

/* Vuelve el filete: sin el corte de color, la seccion necesita su
   propia linea de separacion respecto al diagnostico. */
.marcas { padding: 56px 0 58px; border-top: 1px solid var(--linea); }
.marcas-titulo {
  margin: 0 0 18px; font-size: 12px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--gris-50);
}
/* Carrusel de clientes -----------------------------------------------------
   Nueve logotipos de anchos distintos nunca cuadran en una fila fija: al
   envolver siempre queda alguno descolgado. La cinta elimina el problema
   porque no envuelve nunca, sea cual sea el ancho de la pantalla.        */

.cinta {
  --escala: 1;
  position: relative;
  overflow: hidden;
  margin-top: 26px;
  /* Los logos se desvanecen en los extremos en vez de cortarse en seco. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.cinta-pista {
  display: flex; align-items: center;
  width: max-content;
  margin: 0; padding: 0; list-style: none;
  animation: desfilar 40s linear infinite;
}

/* La separacion va en el margen y no en gap a proposito. Con gap, el hueco
   entre series no cuenta en el ancho total y el bucle daria un salto. */
.cinta-pista li { flex: 0 0 auto; margin-right: 58px; }

.cinta-pista img {
  display: block;
  width: calc(var(--w) * var(--escala));
  height: auto;
  opacity: 0.62;
  transition: opacity 0.2s ease;
}
.cinta-pista li:hover img { opacity: 1; }

/* Se desplaza exactamente una serie, por eso el reinicio no se nota. */
@keyframes desfilar {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-100% / var(--repeticiones)), 0, 0); }
}

/* Al pasar por encima se detiene, para poder mirar una marca concreta. */
.cinta:hover .cinta-pista { animation-play-state: paused; }

/* ------------------------------ DIAGNOSTICO ----------------------------- */

/* Sube justo debajo de la portada, que ya aporta su propio aire abajo,
   por eso el margen superior es corto. */
.diagnostico { padding: 40px 0 88px; }

/* Rotulo de seccion al estilo de las presentaciones, con su punto azul. */
.diagnostico-rotulo {
  margin: 0 0 34px;
  font-size: 22px; font-weight: 700; letter-spacing: -0.8px;
  color: var(--blanco);
}
.diagnostico-rotulo span { color: var(--azul); }

.progreso { margin-bottom: 34px; }
.progreso-barra {
  height: 3px; background: rgba(255, 255, 255, 0.1); border-radius: 999px; overflow: hidden;
}
.progreso-barra span {
  display: block; height: 100%; width: 0;
  background: var(--azul); border-radius: 999px;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.progreso-texto {
  margin: 12px 0 0; font-size: 13px; color: var(--gris-50); letter-spacing: 0.5px;
}

.quiz { margin: 0; }

.paso {
  display: none; margin: 0; padding: 0; border: 0;
  animation: entrar 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.paso.activo { display: block; }

@keyframes entrar {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.volver {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 20px; padding: 0;
  background: none; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: 14px; color: var(--gris-50);
  transition: color 0.15s ease;
}
/* Punta de flecha dibujada con dos bordes girados. No depende de que la
   tipografia traiga el glifo, que Helvetica Neue no lo trae. */
.volver::before {
  content: ''; width: 7px; height: 7px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
.volver:hover { color: var(--azul); }
.volver:hover::before { transform: rotate(45deg) translate(2px, -2px); }

.paso-titulo {
  display: block; padding: 0; margin: 0 0 10px;
  font-size: clamp(26px, 4.2vw, 38px); line-height: 1.15;
  font-weight: 700; letter-spacing: -1.2px;
}
.paso-ayuda { margin: 0 0 30px; color: var(--neutro-40); font-size: 16px; }

/* Opciones ---------------------------------------------------------------- */
/* Tarjetas sobre el fondo negro, al estilo de los recuadros de servicios de
   la presentacion. La opcion elegida se rellena del azul de marca, igual
   que el recuadro destacado de aquellas diapositivas.                     */

.opciones { display: grid; grid-template-columns: 1fr; gap: 14px; }
.opciones-2 { grid-template-columns: repeat(2, 1fr); }

.opcion { position: relative; display: block; cursor: pointer; }
.opcion input {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.opcion span {
  display: flex; align-items: center; min-height: 66px;
  padding: 16px 22px 16px 58px;
  background: var(--tarjeta);
  border: 1px solid var(--linea); border-radius: var(--radio);
  font-size: 16px; font-weight: 400; color: var(--blanco);
  transition: border-color 0.15s ease, background 0.15s ease,
              box-shadow 0.18s ease, transform 0.18s ease;
}
.opcion span::before {
  content: ''; position: absolute; left: 22px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px;
  border: 1.5px solid var(--gris-80); border-radius: 50%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.opcion input[type="checkbox"] + span::before { border-radius: 6px; }

.opcion:hover span {
  border-color: rgba(40, 58, 254, 0.45);
  background: var(--tarjeta-alta);
  transform: translateY(-1px);
}
.opcion input:focus-visible + span { outline: 2px solid var(--azul); outline-offset: 2px; }

.opcion input:checked + span {
  background: var(--azul);
  border-color: var(--azul);
  color: var(--blanco);
  box-shadow: 0 10px 26px rgba(40, 58, 254, 0.28);
}
.opcion input:checked + span::before {
  border-color: var(--blanco); background: var(--blanco);
  box-shadow: inset 0 0 0 4px var(--azul);
}
.opcion input[type="checkbox"]:checked + span::before {
  box-shadow: inset 0 0 0 3px var(--azul);
}

/* Campo que solo aparece al marcar "Otro". Entra con la misma animacion
   que los pasos, para que el despliegue no parezca un salto. */
.campo-condicional {
  margin-top: 16px;
  animation: entrar 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.campo-condicional .campo { margin-bottom: 0; }
.campo-condicional .boton-avanzar { margin-top: 22px; }

/* Campos de texto --------------------------------------------------------- */

.campo { margin-bottom: 18px; }
.campo label {
  display: block; margin-bottom: 8px;
  font-size: 14px; font-weight: 500; color: var(--neutro-20);
}
.campo .opcional { color: var(--gris-50); font-weight: 300; }
.campo input,
.campo textarea {
  width: 100%; padding: 17px 18px;
  background: var(--tarjeta); color: var(--blanco);
  border: 1px solid var(--linea); border-radius: var(--radio);
  font-family: var(--sans); font-size: 16px; font-weight: 400;
  transition: border-color 0.15s ease, box-shadow 0.18s ease;
}
.campo textarea { resize: vertical; line-height: 1.5; }
.campo input::placeholder,
.campo textarea::placeholder { color: #4A4F66; }
.campo input:focus,
.campo textarea:focus {
  outline: none; border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(40, 58, 254, 0.22);
}
.campo.error input,
.campo.error textarea { border-color: var(--rojo); }
.campo .mensaje-error {
  display: block; margin-top: 7px; font-size: 13px; color: var(--rojo-texto); font-weight: 400;
}

/* Consentimientos --------------------------------------------------------- */

.consentimiento {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: 18px; font-size: 14px; line-height: 1.5; color: var(--neutro-20);
  cursor: pointer;
}
.consentimiento input {
  flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0;
  accent-color: var(--azul); cursor: pointer;
}
.consentimiento a { color: var(--azul-texto); }
.consentimiento.error span { color: var(--rojo-texto); }

/* Es texto legal obligatorio, asi que no baja de este gris: por debajo
   deja de leerse sobre el negro. */
.nota-legal { margin: 18px 0 0; font-size: 12px; line-height: 1.5; color: var(--gris-50); }

.trampa {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

.error-global {
  margin-top: 22px; padding: 15px 18px;
  background: rgba(255, 90, 90, 0.1); border: 1px solid rgba(255, 90, 90, 0.35);
  border-radius: var(--radio); color: var(--rojo-texto); font-size: 15px;
}

/* -------------------------------- RESULTADO ------------------------------ */

/* Va sobre una tarjeta, como las fichas de la presentacion.
   `scroll-margin-top` reserva el hueco de la cabecera fija: sin esto, al
   saltar aqui la barra superior taparia el principio del informe. */
.resultado {
  animation: entrar 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 40px;
  background: var(--tarjeta);
  border: 1px solid var(--linea); border-radius: 20px;
  scroll-margin-top: 92px;
}

.resultado-marca {
  display: inline-block; margin-bottom: 22px;
  padding: 7px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 500; letter-spacing: 0.5px;
}
.resultado-marca.caliente { background: rgba(40, 58, 254, 0.18); color: #8993FE; }
.resultado-marca.tibio    { background: rgba(255, 255, 255, 0.08); color: var(--neutro-20); }
.resultado-marca.frio     { background: rgba(255, 255, 255, 0.05); color: var(--gris-50); }

.resultado-titulo {
  margin: 0 0 16px;
  font-size: clamp(30px, 5vw, 46px); line-height: 1.1;
  font-weight: 700; letter-spacing: -1.6px;
}
.resultado-texto { margin: 0 0 32px; font-size: 18px; color: var(--neutro-20); max-width: 52ch; }
.resultado-nota { margin: 20px 0 0; font-size: 14px; color: var(--gris-50); }

/* Informe de la web del lead --------------------------------------------- */
/* Es la contrapartida de haber respondido nueve preguntas, asi que ocupa
   sitio y se lee entero, tambien cuando la nota es mala.                  */

.informe {
  --tono: var(--gris-50);
  margin: 32px 0 0; padding: 30px 32px;
  background: var(--tarjeta-alta);
  border: 1px solid var(--linea); border-radius: 16px;
}
.informe.buena { --tono: #35C77B; }
.informe.media { --tono: #E6A117; }
.informe.baja  { --tono: #FF6B6B; }

.informe-cabecera { display: flex; align-items: flex-start; gap: 22px; flex-wrap: wrap; }

.informe-nota { display: flex; align-items: baseline; gap: 7px; }
.informe-nota strong {
  font-size: 54px; font-weight: 700; letter-spacing: -2.5px;
  line-height: 0.9; color: var(--tono);
}
.informe-nota span { font-size: 13px; color: var(--gris-50); }

.informe-rotulo {
  margin: 0; font-size: 12px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--gris-50);
}
.informe-url { margin: 4px 0 0; font-size: 15px; font-weight: 500; color: var(--blanco); }
.informe-resumen { margin: 8px 0 0; font-size: 15px; color: var(--neutro-20); max-width: 46ch; }

/* Rejilla que reparte los hallazgos en tantas columnas como quepan. En la
   pantalla final, que va ancha, salen tres; en movil, una. */
.informe-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 0 32px;
  margin: 22px 0 0; padding: 0; list-style: none;
}

.hallazgo {
  position: relative;
  padding: 13px 0 14px 28px;
  border-top: 1px solid var(--linea);
}
/* El punto de color sustituye a un icono: una marca de estado que se
   entiende sin leer y sin depender de ninguna tipografia. */
.hallazgo::before {
  content: ''; position: absolute; left: 3px; top: 20px;
  width: 9px; height: 9px; border-radius: 50%;
}
.hallazgo.bien::before  { background: #35C77B; }
.hallazgo.aviso::before { background: #E6A117; }
.hallazgo.mal::before   { background: #FF6B6B; }

.hallazgo-titulo {
  display: block; font-size: 15px; font-weight: 500; color: var(--blanco);
}
.hallazgo-detalle {
  display: block; margin-top: 3px; font-size: 14px; line-height: 1.5;
  color: var(--neutro-40);
}

.informe-aviso {
  margin: 26px 0 0; padding: 15px 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--linea); border-radius: var(--radio);
  font-size: 15px; color: var(--neutro-20);
}

.resultado-redes {
  margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--linea);
}
.resultado-redes p { margin: 0 0 14px; font-size: 15px; color: var(--neutro-40); }
.resultado-redes ul {
  display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none;
}
/* Botones redondos con el icono de cada red. El icono hereda el color del
   enlace, asi que basta con cambiar `color` para que reaccione. */
.resultado-redes a {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--linea); border-radius: 50%;
  color: var(--neutro-20);
  transition: color 0.15s ease, border-color 0.15s ease,
              background 0.15s ease, transform 0.18s ease;
}
.resultado-redes a svg {
  width: 19px; height: 19px; display: block; fill: currentColor;
}
.resultado-redes a:hover,
.resultado-redes a:focus-visible {
  color: var(--blanco);
  border-color: var(--azul);
  background: rgba(40, 58, 254, 0.16);
  transform: translateY(-2px);
}
.resultado-redes a:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }

/* ----------------------------------- PIE --------------------------------- */

.pie { padding: 40px 0; border-top: 1px solid var(--linea); }
.pie-cuerpo {
  display: flex; flex-wrap: wrap; gap: 14px 28px;
  align-items: center; justify-content: space-between;
}
/* El logotipo sustituye a la palabra "Bluecell" que abria la linea. Se
   separa de las ciudades con un filete y no con un punto, porque mezclar
   una marca grafica con un separador tipografico queda sucio. */
.pie-marca { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }
.pie-marca img { display: block; width: 76px; height: auto; opacity: 0.85; }
.pie-marca p { position: relative; padding-left: 19px; }
.pie-marca p::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 1px; height: 15px; margin-top: -7px;
  background: var(--linea);
}
.pie p { margin: 0; font-size: 14px; color: var(--gris-50); }
.pie ul { display: flex; gap: 22px; margin: 0; padding: 0; list-style: none; }
.pie a { color: var(--neutro-40); text-decoration: none; font-size: 14px; }
.pie a:hover { color: var(--azul); }

/* --------------------------------- MOVIL --------------------------------- */

@media (max-width: 640px) {
  body { font-size: 16px; }
  .portada { padding: 56px 0 48px; }
  /* En pantalla estrecha el texto cruza toda la anchura, así que el velo
     deja de ser lateral y pasa a ser parejo, con algo más de carga. */
  .portada-velo {
    background:
      linear-gradient(rgba(0, 0, 2, 0.90), rgba(0, 0, 2, 0.90)),
      linear-gradient(to top, var(--negro) 3%, rgba(0, 0, 2, 0) 46%);
  }
  .portada-imagen { object-position: 62% 40%; }
  .titular { letter-spacing: -1.2px; }
  .boton { width: 100%; }
  .opciones-2 { grid-template-columns: 1fr; }
  .resultado { padding: 28px 22px; }
  /* Un solo valor reduce los nueve logotipos a la vez, sin descuadrarlos. */
  .cinta { --escala: 0.78; }
  .cinta-pista li { margin-right: 40px; }
  .cabecera-nota { display: none; }
  .pie-cuerpo { flex-direction: column; align-items: flex-start; }
  /* Al caer el texto a su propia linea el filete se quedaria colgando. */
  .pie-marca { gap: 14px; }
  .pie-marca p { padding-left: 0; }
  .pie-marca p::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }

  /* Sin animacion la cinta se quedaria congelada mostrando solo los
     primeros logos. Se convierte en una fila centrada y se ocultan las
     copias, que solo existen para que el bucle no deje huecos. */
  .cinta { overflow: visible; -webkit-mask-image: none; mask-image: none; padding: 0 24px; }
  .cinta-pista {
    width: auto; flex-wrap: wrap; justify-content: center;
    max-width: var(--ancho); margin: 0 auto;
  }
  .cinta-pista li { margin: 0 29px 22px; }
  .cinta-pista li[aria-hidden="true"] { display: none; }
}