Small   sec-s
Medium   sec-m
Large   sec-l
Hero   sec-hero
Full (100vh height)   sec-fullscreen
Light  sec-light
Dark  sec-dark
Muted   sec-muted
Primary   sec-primary
Anchor   section-anchor

SECCIONES CON PADDING

Padding básico – superior e inferior
Extra Pequeño: (32px – 64px) section-padding-xs
Pequeño: (48px – 96px) section-padding-s
Mediano: (64px – 160px) section-padding-m
Grande: (96px – 224px) section-padding-l
Extra Grande: (128px – 288px) section-padding-xl
Máximo: (160px – 384px) section-padding-full

Padding solo superior
Extra Pequeño Superior: section-padding-top-xs
Pequeño Superior: section-padding-top-s
Mediano Superior: section-padding-top-m
Grande Superior: section-padding-top-l
Extra Grande Superior: section-padding-top-xl
Máximo Superior: section-padding-top-full

Padding solo inferior
Extra Pequeño Inferior: section-padding-bottom-xs
Pequeño Inferior: section-padding-bottom-s
Mediano Inferior: section-padding-bottom-m
Grande Inferior: section-padding-bottom-l
Extra Grande Inferior: section-padding-bottom-xl
Máximo Inferior: section-padding-bottom-full

Padding responsivo – Tablet (768px+):
Extra Pequeño Tablet: section-padding-xs-sm
Pequeño Tablet: section-padding-s-sm
Mediano Tablet: section-padding-m-sm
Grande Tablet: section-padding-l-sm
Extra Grande Tablet: section-padding-xl-sm
Máximo Tablet: section-padding-full-sm

Padding responsivo – Escritorio (1024px+):
Extra Pequeño Escritorio: section-padding-xs-lg
Pequeño Escritorio: section-padding-s-lg
Mediano Escritorio: section-padding-m-lg
Grande Escritorio: section-padding-l-lg
Extra Grande Escritorio: section-padding-xl-lg
Máximo Escritorio: section-padding-full-lg

Padding responsivo – Escritorio XL (1200px+):
Extra Pequeño Escritorio XL: section-padding-xs-xl
Pequeño Escritorio XL: section-padding-s-xl
Mediano Escritorio XL: section-padding-m-xl
Grande Escritorio XL: section-padding-l-xl
Extra Grande Escritorio XL: section-padding-xl-xl
Máximo Escritorio XL: section-padding-full-xl

Padding responsivo – 2XL (1440px+):
Extra Pequeño 2XL: section-padding-xs-2xl
Pequeño 2XL: section-padding-s-2xl
Mediano 2XL: section-padding-m-2xl
Grande 2XL: section-padding-l-2xl
Extra Grande 2XL: section-padding-xl-2xl
Máximo 2XL: section-padding-full-2xl

Relleno fluido de ancho completo   dc-block
Contenedor centrado ancho completo   dc-container
Relleno fluido solo vertical   dc-section
Fila ancho completo relleno horizontal fluido   dc-fluid-row
Centrar el contenido vertical / horizontal   dc-center

xSmall   rad-xs
Small   rad-s
Medium   rad-m
Large   rad-l
xLarge   rad-xl
Full   rad-full

Extra Small   img-rad-xs
Small   img-rad-s
Medium   img-rad-m
Large  img-rad-l
XLarge  img-rad-xl
Full   img-rad-full
Circ   img-rad-circ

Completos
m-0
m-xs
m-s
m-m
m-l
m-xl

Superiores
mt-0
mt-xs
mt-s
mt-m
mt-l
mt-xl

Inferiores
mb-0
mb-xs
mb-s
mb-m
mb-l
mb-xl

Izquierdos
ml-0
ml-xs
ml-s
ml-m
ml-l
ml-xl

Derechos
mr-0
mr-xs
mr-s
mr-m
mr-l
mr-xl

Horizontales
mx-0
mx-xs
mx-s
mx-m
mx-l
mx-xl
mx-auto

Verticales
my-0
my-xs
my-s
my-m
my-l
my-xl

MÁRGENES NEGATIVOS

Superiores
mt-neg-xs
mt-neg-s
mt-neg-m
mt-neg-l
mt-neg-xl

Inferiores
mb-neg-xs
mb-neg-s
mb-neg-m
mb-neg-l
mb-neg-xl

Completos
p-0    p-xs    p-s    p-m    p-l    p-xl

Superiores
pt-0    pt-xs    pt-s    pt-m    pt-l    pt-xl

Inferiores
pb-0    pb-xs    pb-s    pb-m    pb-l    pb-xl

Izquierdos
pl-0    pl-xs    pl-s    pl-m    pl-l    pl-xl

Derechos
pr-0    pr-xs    pr-s    pr-m    pr-l    pr-xl

Horizontales
px-0    px-xs    px-s    px-m    px-l    px-xl

Verticales
py-0    py-xs    py-s    py-m    py-l    py-xl

Darkens on hover   hover-dark
Reduces opacity on hover   hover-opacity
Adds border on hover   hover-border
Scales up on hover   hover-scale
Adds shadow on hover   hover-shadow
Glow Hover   hover-glow

Gaps Generales
gap-0 /* Sin espaciado */
gap-xs /* Espaciado extra pequeño */
gap-s /* Espaciado pequeño */
gap-m /* Espaciado medio (por defecto) */
gap-l /* Espaciado grande */
gap-xl /* Espaciado extra grande */

Gaps Direccionales
/* Solo horizontal */
gap-x-0
gap-x-xs
gap-x-s
gap-x-m
gap-x-l
gap-x-xl

/* Solo vertical */
gap-y-0
gap-y-xs
gap-y-s
gap-y-m
gap-y-l
gap-y-xl

gap: Espacio entre todos los elementos
gap-x: Solo espacio horizontal
gap-y: Solo espacio vertical
Usar para controlar el espaciado entre elementos

Ancho: ajustado al espacio   w-fit
Ancho: 50%   w-half
Ancho: 33.33%   w-third
Ancho: 25%   w-quarter

Galería 2 columnas   galeria-2col
Galería 3 columnas   galeria-3col
Galería 4 columnas   galeria-4col
Galería 5 columnas   galeria-5col
Galería 6 columnas   galeria-6col

Animaciones básicas
Aparece desde abajo   reveal-up
Aparece desde abajo suave   reveal-up-soft
Aparece desde abajo fuerte   reveal-up-strong
Aparece desde arriba   reveal-down
Aparece desde la derecha   reveal-left
Aparece desde la izquierda   reveal-right

Rotaciones Sutiles
Suave desde diferentes ángulos   reveal-rotate
Suave desde izquierda   reveal-rotate-left
Suave desde derecha   reveal-rotate-right

Para Grupos de Elementos
Animación en secuencia   reveal-cascade
Secuencia con zoom   reveal-cascade-zoom

Efectos de Zoom
Zoom suave hacia adentro   reveal-zoom-in
Zoom suave hacia afuera   reveal-zoom-out
Zoom con movimiento hacia arriba   reveal-zoom-up
Zoom con movimiento hacia abajo   reveal-zoom-down
Zoom con rotación sutil   reveal-zoom-rotate

FX Básicos
Simple desvanecimiento   reveal-fade
Efecto de surgimiento   reveal-emerge
Efecto flotante   reveal-float
Entrada dramática   reveal-dramatic
Aparición natural y suave   reveal-natural

FX Avanzados
Efecto de despliegue   reveal-unfold
Efecto de deslizamiento suave   reveal-slide
Efecto de aparición natural   reveal-natural