> ## Documentation Index
> Fetch the complete documentation index at: https://docs.landerlab.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Personaliza tu página con CSS personalizado

> Aprende a usar CSS personalizado en los quizzes de LanderLab para dar estilo a los pasos, campos, desplegables y otros elementos más allá de los ajustes de diseño integrados.

LanderLab te permite diseñar quizzes de forma visual, pero si necesitas más control puedes usar **Custom CSS** para dar estilo a tu quiz más allá de los ajustes integrados.

Es útil cuando quieres ajustar al detalle el aspecto de los elementos del quiz o aplicar estilos que no están disponibles en el editor.

***

## Cómo funciona

LanderLab te permite inyectar CSS personalizado en tu flujo. Tu CSS se limita automáticamente al contenedor raíz `.ll-quiz`, así que los estilos solo afectan a tu quiz y nunca se filtran al resto de la página.

### Dónde añadir el CSS

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/nZqgRHMCi_31GFLg/images/css.png?fit=max&auto=format&n=nZqgRHMCi_31GFLg&q=85&s=8817775ebae44849d4a54a2b12073a74" alt="El panel Custom CSS dentro de Settings en el editor de quizzes de LanderLab" width="1920" height="989" data-path="images/css.png" />
</Frame>

En el editor de LanderLab, abre **Settings → Custom CSS** y pega ahí tus reglas. Todos los selectores que escribas ya están dentro de `.ll-quiz`, así que no necesitas añadir ningún prefijo.

<Tip>
  No puedes dar estilo al propio elemento raíz `.ll-quiz` (por ejemplo, `background` o `font-family`). Esas propiedades las controla el motor de temas. Apunta a los elementos hijos en su lugar.
</Tip>

## Reglas de alcance

Todo tu CSS vive dentro de `.ll-quiz`. Las variables del tema (como `--colorPrimary`) son de solo lectura: las define el motor de temas y no se pueden sobrescribir. Para cambiar el aspecto de algo, escribe reglas CSS normales que apunten a los selectores que se describen en esta guía.

**✓ Haz esto**

```text theme={null}
.ll-quiz-continue-button {
  background-color: #ff6600;
  color: #ffffff;
  border-radius: 50px;
}
```

**✗ No hagas esto: las variables son de solo lectura**

```text theme={null}
/* Esto NO funcionará */
.ll-quiz {
  --colorPrimary: #ff6600;
}
```

## Referencia de selectores

Usa estos selectores para apuntar a los elementos que quieres modificar. Todos están limitados automáticamente a `.ll-quiz`.

### Diseño y estructura

**.ll-quiz-step**

Todos los pasos (visibles y ocultos)

**.ll-quiz-step\[data-active-step="true"]**

Solo el paso visible en ese momento

**.ll-quiz-header**

Zona fija de la cabecera superior

**.ll-quiz-footer**

Zona fija del pie inferior

**.ll-quiz-block**

Cualquier bloque, de cualquier tipo

**.ll-quiz-block--\[type]**

Un tipo de bloque concreto (por ejemplo, `--text-field`)

### **Campos de entrada**

**.ll-quiz-block\_\_input**

Todos los campos de texto y desplegables

**.ll-quiz-block\_\_input-wrapper**

Div contenedor que envuelve los campos

**.ll-quiz-block\_\_label**

Etiquetas de los campos

**.ll-quiz-block\_\_decorator**

Iconos o texto de prefijo y sufijo

### **Botones**

**.ll-quiz-continue-button**

Botón Continue

**.ll-quiz-previous-button**

Botón Previous (atrás)

**.ll-quiz-submit-button**

Botón Submit

**.ll-quiz-default-button**

Botón de acción genérico

**.ll-quiz-button-text**

Texto dentro de cualquier botón

**.ll-quiz-button-description**

Subtítulo dentro de cualquier botón

### **Bloques de opciones**

**.ll-choice-option**

Una opción de opción múltiple

**.ll-choice-option:has(input:checked)**

Una opción seleccionada

**.ll-choice-option\_\_text**

Texto dentro de una opción

**.ll-img-choice-option**

Tarjeta de una opción con imagen

**.ll-img-choice-option:has(input:checked)**

Tarjeta con imagen seleccionada

**.ll-choice-label**

Etiqueta del grupo de un bloque de opciones

### **Progreso y mensajes**

**.ll-quiz-progress\_\_fill**

La parte rellena de la barra

**.ll-quiz-header\_\_progress-fill**

Relleno de la barra de progreso de la cabecera

**.ll-quiz-block--has-error**

Un bloque que no ha superado la validación

**.ll-quiz-block-error**

El texto del mensaje de error

**.ll-quiz-variable**

Variables dinámicas dentro del texto (por ejemplo, el nombre)

## Campos de entrada

Todos los campos de texto, desplegables, áreas de texto y similares comparten la misma estructura de clases. Apunta a `.ll-quiz-block__input` para darles estilo a todos a la vez, o filtra por tipo de bloque para controlarlos uno a uno.

### **Da estilo a todos los campos de entrada**

**CSS**

```text theme={null}
.ll-quiz-block__input {
  background-color: #f9f9f9;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 16px;
  padding: 12px 16px;
}

.ll-quiz-block__input:hover {
  border-color: #aaa;
}

.ll-quiz-block__input:focus {
  border-color: #3366ff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(51, 102, 255, 0.12);
}
```

### Apunta a un bloque concreto por su ID

Encontrarás el ID del bloque en la URL cuando lo editas en LanderLab (por ejemplo, `text-field-abc123`).

```text theme={null}
#text-field-abc123 .ll-quiz-block__input {
  font-size: 20px;
  border-color: #ff6600;
}
```

### Da estilo a los prefijos y sufijos

```text theme={null}
.ll-quiz-block__decorator--prefix {
  color: #888;
  font-size: 14px;
}

.ll-quiz-block__decorator--suffix svg {
  width: 18px;
  height: 18px;
  fill: #18c085;
}
```

### Etiquetas

```text theme={null}
.ll-quiz-block__label {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #333;
}

.ll-quiz-block__label-text {
  color: #555;
}
```

## Botones

En LanderLab los botones se renderizan como elementos `<a>`, no como `<button>`. Usa el selector específico de cada tipo de botón o apunta a todos a la vez con una clase compartida.

### Botón Continue

```text theme={null}
.ll-quiz-continue-button {
  background-color: #18c085;
  color: #ffffff;
  border-radius: 50px;
  padding: 14px 36px;
  font-size: 16px;
  font-weight: 600;
  transition: background-color 0.2s ease;
}

.ll-quiz-continue-button:hover {
  background-color: #14a872;
}
```

### Botón Previous

```text theme={null}
.ll-quiz-previous-button {
  background: transparent;
  color: #888;
  border: 1.5px solid #ddd;
  border-radius: 8px;
}

.ll-quiz-previous-button:hover {
  border-color: #aaa;
  color: #555;
}
```

### Botón Submit

```text theme={null}
.ll-quiz-submit-button {
  background-color: #ff6600;
  color: #fff;
  border-radius: 6px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.ll-quiz-submit-button:hover {
  background-color: #e05a00;
}
```

### Da estilo a todos los botones a la vez

```text theme={null}
.ll-quiz-continue-button,
.ll-quiz-submit-button,
.ll-quiz-default-button {
  border-radius: 12px;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
```

### Subtítulo del botón (descripción)

```text theme={null}
.ll-quiz-button-description {
  font-size: 12px;
  opacity: 0.75;
  font-weight: 400;
  display: block;
  margin-top: 2px;
}
```

## Bloques de opciones

Puedes dar estilo a las opciones de los bloques de opción múltiple y de elección con imágenes en sus estados normal, hover y seleccionado.

### Da estilo a las opciones

```text theme={null}
.ll-choice-option {
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  padding: 12px 16px;
  background: #ffffff;
  transition: transform 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}

.ll-choice-option:hover {
  transform: scale(1.02);
  border-color: #18c085;
}

/* Estado seleccionado */
.ll-choice-option:has(input:checked) {
  background-color: #e6f9f3;
  border-color: #18c085;
}
```

### Tarjetas de elección con imágenes

```text theme={null}
.ll-img-choice-option {
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color 0.2s ease;
}

.ll-img-choice-option:has(input:checked) {
  border-color: #18c085;
  box-shadow: 0 0 0 3px rgba(24, 192, 133, 0.15);
}
```

### Oculta el icono de radio o casilla

```text theme={null}
.ll-choice-option__custom-input {
  display: none;
}
```

## Barras de progreso

Hay dos ubicaciones para la barra de progreso: una dentro de los pasos y otra en la cabecera. Puedes darles estilo por separado o a la vez.

### Barra de progreso dentro del paso

```text theme={null}
/* Pista */
.ll-quiz-progress--bar {
  background-color: #e8e8e8;
  border-radius: 99px;
  height: 8px;
}

/* Relleno */
.ll-quiz-progress__fill {
  background-color: #18c085;
  border-radius: 99px;
  transition: width 0.4s ease;
}
```

### Barra de progreso de la cabecera

```text theme={null}
.ll-quiz-header__progress {
  background-color: #f0f0f0;
  height: 4px;
}

.ll-quiz-header__progress-fill {
  background-color: #3366ff;
  transition: width 0.4s ease;
}
```

## Diseño adaptable

LanderLab usa **container queries de CSS**, no media queries. Usa siempre la sintaxis de contenedor que ves abajo: las consultas `@media` estándar no funcionan como esperas dentro del contenedor del quiz.

El punto de corte es **490px**: todo lo que sea más ancho se trata como escritorio y todo lo que sea más estrecho, como móvil.

**Sintaxis de las container queries**

```text theme={null}
/* Escritorio (más de 490px) */
@container quiz-container (inline-size > 490px) {
  .ll-quiz-continue-button {
    font-size: 18px;
    padding: 16px 40px;
  }
}

/* Móvil (490px o menos) */
@container quiz-container (inline-size <= 490px) {
  .ll-quiz-continue-button {
    width: 100%;
    font-size: 15px;
  }

  /* Oculta un bloque en móvil */
  #my-block-id {
    display: none;
  }
}
```

**No uses media queries @media**

Usa `@container quiz-container (...)` en lugar de `@media (...)`. El quiz es un componente contenedor y las media queries no reflejan su ancho real.

## Estados y validación

Cuando un campo no supera la validación, recibe la clase `.ll-quiz-block--has-error`. Úsala para dar a los estados de error un estilo coherente con tu diseño.

### Estilo de los errores

```text theme={null}
/* Resalta el contenedor del campo */
.ll-quiz-block--has-error .ll-quiz-block__input-wrapper {
  border-color: #EA7A74;
  box-shadow: 0 0 0 3px rgba(234, 122, 116, 0.15);
}

/* Da estilo al propio campo */
.ll-quiz-block--has-error .ll-quiz-block__input {
  color: #c0392b;
}

/* Da estilo al texto del mensaje de error */
.ll-quiz-block-error {
  font-size: 13px;
  color: #EA7A74;
  margin-top: 6px;
  font-weight: 500;
}
```

### Variables de texto dinámicas

Los bloques de texto pueden incluir variables en vivo como `{{firstName}}` que se actualizan mientras el usuario escribe. Se renderizan como elementos span con la clase `.ll-quiz-variable`.

```text theme={null}
.ll-quiz-variable {
  color: #18c085;
  font-weight: 600;
}
```

## Ejemplos completos

Pega cualquiera de estos ejemplos en tu panel Custom CSS para empezar rápidamente.

### Ejemplo 1: tema minimalista y limpio

```text theme={null}
/* Campos de entrada */
.ll-quiz-block__input {
  border: 1.5px solid #ddd;
  border-radius: 8px;
  background: #fafafa;
  font-size: 15px;
  padding: 11px 14px;
}
.ll-quiz-block__input:focus {
  border-color: #333;
  background: #fff;
  outline: none;
}

/* Botón Continue */
.ll-quiz-continue-button {
  background-color: #111;
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
}
.ll-quiz-continue-button:hover {
  background-color: #333;
}

/* Opciones */
.ll-choice-option {
  border: 1.5px solid #eee;
  border-radius: 8px;
}
.ll-choice-option:has(input:checked) {
  border-color: #111;
  background: #f5f5f5;
}
```

### Ejemplo 2: tema redondeado y colorido

```text theme={null}
/* Campos de entrada */
.ll-quiz-block__input {
  border: 2px solid #e0e7ff;
  border-radius: 50px;
  padding: 12px 20px;
  font-size: 15px;
}
.ll-quiz-block__input:focus {
  border-color: #6366f1;
  outline: none;
}

/* Botones Continue y Submit */
.ll-quiz-continue-button,
.ll-quiz-submit-button {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  border-radius: 50px;
  font-weight: 700;
}

/* Progreso */
.ll-quiz-progress__fill,
.ll-quiz-header__progress-fill {
  background-color: #6366f1;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Opción seleccionada */
.ll-choice-option:has(input:checked) {
  background-color: #eef2ff;
  border-color: #6366f1;
}
```

### Ejemplo 3: ajustes de diseño pensados para móvil

```text theme={null}
@container quiz-container (inline-size <= 490px) {
  /* Botones a ancho completo en móvil */
  .ll-quiz-continue-button,
  .ll-quiz-submit-button {
    width: 100%;
    text-align: center;
    padding: 14px;
  }

  /* Zonas táctiles más grandes para las opciones */
  .ll-choice-option {
    padding: 14px 16px;
    min-height: 52px;
  }

  /* Texto de los campos algo más grande */
  .ll-quiz-block__input {
    font-size: 16px; /* evita el zoom de iOS al enfocar */
  }
}
```

## Lista de clases por tipo de bloque

Usa estos modificadores sobre `.ll-quiz-block` para apuntar a tipos de bloque concretos.

| **Clase modificadora**               | **Tipo de bloque**          |
| :----------------------------------- | :-------------------------- |
| `.ll-quiz-block--text-field`         | Campo de texto              |
| `.ll-quiz-block--email-field`        | Campo de email              |
| `.ll-quiz-block--phone-number-field` | Campo de teléfono           |
| `.ll-quiz-block--number-field`       | Campo numérico              |
| `.ll-quiz-block--textarea-field`     | Área de texto               |
| `.ll-quiz-block--select-field`       | Desplegable                 |
| `.ll-quiz-block--date-field`         | Selector de fecha           |
| `.ll-quiz-block--checkbox-field`     | Casilla de verificación     |
| `.ll-quiz-block--range-slider`       | Control deslizante de rango |
| `.ll-quiz-block--multiple-choice`    | Opción múltiple             |
| `.ll-quiz-block--image-choice`       | Elección con imágenes       |
| `.ll-quiz-block--continue`           | Botón Continue              |
| `.ll-quiz-block--submit`             | Botón Submit                |
| `.ll-quiz-block--headline`           | Texto de título             |
| `.ll-quiz-block--paragraph`          | Texto de párrafo            |
| `.ll-quiz-block--progress`           | Barra de progreso           |
| `.ll-quiz-block--accordion`          | Acordeón                    |
| `.ll-quiz-block--countdown`          | Cuenta atrás                |