La función `if()` permite asignar un valor a una propiedad basándose en una prueba lógica. Su estructura es similar al operador ternario de JavaScript: `if( ? : )`.

Esto es extremadamente útil para manejar 'estados' de componentes. Por ejemplo, puedes definir un `--tamaño` y que la función `if()` decida automáticamente el `padding`, el `font-size` y el `border-radius` en una sola línea, sin tener que crear clases adicionales como `.btn--small` o `.btn--large`.

Importante: Esta función está diseñada para trabajar codo con codo con las variables (Custom Properties), haciendo que el CSS sea mucho más programable.

Mientras que las Container Queries tradicionales miran el *tamaño* del padre, las Style Queries miran el *estilo* del padre. Si un contenedor tiene la variable `--theme: dark`, todos sus hijos pueden reaccionar automáticamente.

Esto resuelve el problema de los 'contextos'. Ya no necesitas selectores complejos como `.dark-mode .card .title`. Ahora la tarjeta simplemente pregunta: '¿Estoy en un contenedor oscuro?' y se auto-ajusta.

Sintaxis básica: `@container style(--featured: true) { ... }`. Esto permite que los componentes sean conscientes de su entorno de una manera mucho más granular.