/* Colores y tipografías */
:root {
    --primero: #1e505f;
    --segundo: #7aecff;
    --tercero: #6cc1e8;
    --cuarto: #4da6d1;
    --tipo1: tipo;
    --tipo2: mon;
    --tipo3: gill;
}

@font-face {
    font-family: tipo;
    src: url(../tipografia/Flare-Regular.ttf);
}

@font-face {
    font-family: mon;
    src: url(../tipografia/ExtraBold.otf);
}

@font-face {
    font-family: gill;
    src: url(../tipografia/2885-font.ttf);
}

/* Aplicando las tipografías y colores */
body {
    font-family: var(--tipo1), sans-serif;
    background-color: #f9fafb;
    color: var(--primero);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--tipo2), sans-serif;
    color: var(--primero);
}

p, li {
    font-family: var(--tipo3), sans-serif;
    color: var(--tercero);
}

/* Estilo de los botones */
a {
    background-color: var(--cuarto);
    color: white;
    font-family: var(--tipo2), sans-serif;
    font-weight: bold;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 8px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

a:hover {
    background-color: var(--segundo);
    transform: scale(1.05);
}

/* Estilo del contenedor */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Estilo de la tarjeta del producto */
.bg-white {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.text-gray-900 {
    color: var(--primero);
}

.text-gray-700 {
    color: var(--tercero);
}

.text-gray-600 {
    color: var(--segundo);
}

.text-orange-500 {
    color: var(--cuarto);
}

/* Estilo de la imagen */
img {
    border-radius: 8px;
    width: 100%;
    height: auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Estilo para la disposición en pantallas grandes */
@media (min-width: 1024px) {
    .lg\:flex-row {
        display: flex;
        flex-direction: row;
    }

    .lg\:w-1\/2 {
        width: 50%;
    }

    .lg\:space-x-8 {
        margin-right: 2rem;
        margin-left: 2rem;
    }

    .lg\:mb-0 {
        margin-bottom: 0;
    }

    .lg\:w-auto {
        width: auto;
    }
}