Variante v2 — compacto: en móvil el StepIndicator se colapsa a una
línea «Paso N de 8 · nombre» + barra de progreso DaisyUI (progress), liberando
altura vertical; en tablet reaparece la fila completa de pasos con etiqueta. Cada superficie se muestra a su ancho objetivo (320 / 375 px) con el shell
real del widget (max-w-2xl · card · card-body) y tema e250.
Volcano Teide · Duración aprox. 2h
Rejilla de 7 columnas (grid-cols-7 gap-1) sin desbordar a 320px.
Cada día abandona el aspect-square (que a este ancho daría ~30px) por
min-h-[44px]: pulsable cómodo aunque el ancho de celda sea ~34px.
El card-body baja a p-4 en móvil para recuperar ancho útil.
Selecciona el número de participantes.
Adulto
Adulto38,00 €
Niño (4–11)
Niño19,00 €
Los QuantityStepper (join −/valor/+) suben a min-h-[40px]
y la fila usa flex-wrap: si nombre + precio + stepper no caben, el bloque de
controles baja de línea en vez de recortarse.
Cada opción tiene sus horarios y condiciones.
Tarjetas de opción a ancho completo: el precio "Desde" usa
whitespace-nowrap shrink-0 y el título min-w-0, de modo que
el texto largo envuelve en vez de empujar el precio fuera de pantalla.
Comprueba los datos antes de pagar.
Teleférico del Teide
Teleférico ida y vuelta
Cuándo
sábado, 18 jul 2026 · 10:30
Participantes
Titular
María Fernández
maria.fernandez.reservas@example.com
Filas de desglose flex justify-between con min-w-0 truncate
a la izquierda e importe shrink-0 tabular-nums a la derecha. El email largo usa
break-all: nada empuja el ancho más allá de los 375px.
Introduce los datos de tu tarjeta.
El elemento de tarjeta de Stripe (iframe de terceros con su propio layout
responsive) va en un contenedor w-full max-w-full que no lo recorta; el botón
btn-block de confirmar queda siempre alcanzable bajo él. El contador ⏱ del
header no colisiona con el título gracias a shrink-0.
En móvil, en vez de mostrar 8 chips, el indicador se resume en «Paso N de 8 · nombre»
con una progress DaisyUI: ocupa una sola línea, es imposible que desborde y deja más
altura para el contenido del paso. A partir de sm: (tablet) reaparece la fila completa con etiquetas.
Una sola línea + barra de progreso: cero riesgo de desbordamiento y menos altura consumida.
A ≥640px reaparecen las etiquetas y el conjunto envuelve con holgura.