Variante v1 — reflow: el StepIndicator conserva su fila de números
DaisyUI y simplemente envuelve (flex-wrap) a dos filas en móvil; el paso activo
se resalta. 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 escritorio (sm:) cada paso muestra
número + etiqueta en una fila. En móvil las etiquetas se ocultan (hidden sm:inline,
ya presente en el componente) y quedan solo los números, que envuelven a dos filas
con flex-wrap sin desbordar. El paso activo lleva anillo.
8 números envuelven a 2 filas; cada chip 32px (los navegables ganan área táctil ≥40px con padding).
A ≥640px reaparecen las etiquetas y el conjunto envuelve con holgura.