# Estándar de Cuadros de Contenido (Cards)

## Especificaciones de Diseño

### Estilos Base
```css
rounded-xl           /* Bordes redondeados grandes */
border-2            /* Borde de 2px */
border-brand-bright /* Color del borde: #1B6FA0 */
shadow-md           /* Sombra base media */
p-8                 /* Padding interno de 2rem */
```

### Estilos de Hover
```css
hover:shadow-2xl    /* Sombra extra grande en hover (más pronunciada) */
transition-all      /* Transición suave para todos los cambios */
```

### Clases Completas
```html
<div class="text-center p-8 rounded-xl border-2 border-brand-bright shadow-md hover:shadow-2xl transition-all">
    <!-- Contenido del card -->
</div>
```

## Variantes

### Card Estándar (con ícono circular)
```html
<div class="text-center p-8 rounded-xl border-2 border-brand-bright shadow-md hover:shadow-2xl transition-all">
    <div class="w-20 h-20 bg-accent rounded-full flex items-center justify-center mx-auto mb-6">
        <span class="material-icons text-4xl text-primary">icono_name</span>
    </div>
    <h3 class="text-2xl font-semibold mb-4 text-foreground">TÍTULO</h3>
    <p class="text-muted-foreground leading-relaxed">
        Descripción del contenido
    </p>
</div>
```

### Card Simple (sin ícono)
```html
<div class="p-8 rounded-xl border-2 border-brand-bright shadow-md hover:shadow-2xl transition-all">
    <h3 class="text-2xl font-semibold mb-4 text-foreground">TÍTULO</h3>
    <p class="text-muted-foreground leading-relaxed">
        Descripción del contenido
    </p>
</div>
```

### Card con Imagen
```html
<div class="rounded-xl border-2 border-brand-bright shadow-md hover:shadow-2xl transition-all overflow-hidden">
    <img src="ruta/imagen.jpg" alt="Descripción" class="w-full h-48 object-cover">
    <div class="p-8">
        <h3 class="text-2xl font-semibold mb-4 text-foreground">TÍTULO</h3>
        <p class="text-muted-foreground leading-relaxed">
            Descripción del contenido
        </p>
    </div>
</div>
```

### Card con Número (para pasos/secuencias)
```html
<div class="relative p-8 rounded-xl border-2 border-brand-bright shadow-md hover:shadow-2xl transition-all bg-white">
    <div class="absolute -top-4 -left-4 w-12 h-12 bg-primary text-white rounded-full flex items-center justify-center font-bold text-xl leading-none shadow-lg">
        1
    </div>
    <h3 class="text-xl font-semibold mb-4 text-foreground mt-4">TÍTULO DEL PASO</h3>
    <p class="text-muted-foreground leading-relaxed text-sm">
        Descripción del paso
    </p>
</div>
```
**Uso:** Para mostrar pasos secuenciales o procesos numerados. El número aparece en un círculo en la esquina superior izquierda. `leading-none` asegura centrado perfecto del número.

## Colores Utilizados

- **Borde:** `border-brand-bright` (#1B6FA0)
- **Fondo de ícono:** `bg-accent` (#C2DDED)
- **Color de ícono:** `text-primary` (#015180)
- **Título:** `text-foreground` (color principal de texto)
- **Descripción:** `text-muted-foreground` (color de texto secundario)

## Ejemplos de Uso

### Grid de 3 Columnas
```html
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
    <!-- Card 1 -->
    <div class="text-center p-8 rounded-xl border-2 border-brand-bright shadow-md hover:shadow-2xl transition-all">
        <!-- Contenido -->
    </div>
    
    <!-- Card 2 -->
    <div class="text-center p-8 rounded-xl border-2 border-brand-bright shadow-md hover:shadow-2xl transition-all">
        <!-- Contenido -->
    </div>
    
    <!-- Card 3 -->
    <div class="text-center p-8 rounded-xl border-2 border-brand-bright shadow-md hover:shadow-2xl transition-all">
        <!-- Contenido -->
    </div>
</div>
```

### Grid de 2 Columnas
```html
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
    <!-- Cards aquí -->
</div>
```

### Grid de 4 Columnas (para pasos)
```html
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
    <!-- Card Paso 1 -->
    <div class="relative p-8 rounded-xl border-2 border-brand-bright shadow-md hover:shadow-2xl transition-all bg-white">
        <div class="absolute -top-4 -left-4 w-12 h-12 bg-primary text-white rounded-full flex items-center justify-center font-bold text-xl leading-none shadow-lg">
            1
        </div>
        <h3 class="text-xl font-semibold mb-4 text-foreground mt-4">PASO 1</h3>
        <p class="text-muted-foreground leading-relaxed text-sm">
            Descripción del paso
        </p>
    </div>
    <!-- Repetir para pasos 2, 3, 4 -->
</div>
```

## Notas

- El efecto `hover:shadow-2xl` crea una sombra muy pronunciada que se nota claramente al pasar el cursor
- `transition-all` asegura que todos los cambios (sombra, transform, etc.) sean suaves
- Los bordes `rounded-xl` son más redondeados que `rounded-lg` para un look más moderno
- El borde `border-2 border-brand-bright` le da ese toque distintivo de la marca
- La sombra base `shadow-md` proporciona profundidad incluso sin hover