/* Colores personalizados */
:root {
    --bolidos-red: #e63946;
    --bolidos-blue: #1d3557;
    --bolidos-light-blue: #457b9d;
    --bolidos-light: #f1faee;
}

/* Estilos generales */
body {
    font-family: 'Inter', sans-serif;
    color: #333;
    line-height: 1.6;
}

/* Colores personalizados para Tailwind */
.bg-bolidos-red {
    background-color: var(--bolidos-red);
}

.bg-bolidos-blue {
    background-color: var(--bolidos-blue);
}

.bg-bolidos-light-blue {
    background-color: var(--bolidos-light-blue);
}

.bg-bolidos-light {
    background-color: var(--bolidos-light);
}

.text-bolidos-red {
    color: var(--bolidos-red);
}

.text-bolidos-blue {
    color: var(--bolidos-blue);
}

.text-bolidos-light-blue {
    color: var(--bolidos-light-blue);
}

.border-bolidos-red {
    border-color: var(--bolidos-red);
}

.border-bolidos-blue {
    border-color: var(--bolidos-blue);
}

/* Estilos para formularios */
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--bolidos-blue);
    box-shadow: 0 0 0 3px rgba(69, 123, 157, 0.2);
}

/* Estilos para botones */
button {
    transition: all 0.3s ease;
}

/* Animaciones */
.transition-300 {
    transition: all 0.3s ease;
}

/* Estilos para prose (texto rico) */
.prose {
    max-width: 65ch;
    color: #374151;
}

.prose p {
    margin-bottom: 1.25em;
    line-height: 1.75;
}

.prose h3 {
    font-weight: 600;
    font-size: 1.25rem;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    line-height: 1.3;
}

.prose ul {
    margin-top: 1em;
    margin-bottom: 1em;
    list-style-type: disc;
    padding-left: 1.5em;
}

.prose li {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}