@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600&display=swap');

body {
    background: #F0F4F8; 
    font-family: "Poppins", sans-serif;
    margin: 0;
    padding: 0;
}

header {
    padding: 19px; 
}

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

h1 {
    font-size: 2em;
    font-weight: bold;
    color: #333;
    margin: 30px 0 20px;/* Espacio arriba y abajo del título para separar de las cartas */
    text-align: center; /* Centramos el texto del título */
    padding-left: 0; /* Eliminamos el padding izquierdo para centrar el texto */
    padding-right: 0; /* Eliminamos el padding derecho para centrar el texto */
}

h3 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 40px 10px 10px 10px; /* Eliminar los márgenes predeterminados */
    text-align: center; /* Centrar el texto en caso de varias líneas */
}


/* BOTON PARA AGREGAR */
#btn {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    background-color: #007BFF;
    color: white;
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 40px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif; /* Aplicar la fuente Poppins */
}

#btn:hover {
    background-color: #0056b3;
}

/* Estilo para el círculo blanco alrededor del "+" */
.circle {
    width: 24px;
    height: 24px;
    background-color: white; /* Color del círculo */
    color: #007BFF; /* Color del símbolo "+" */
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-right: 8px; /* Espacio entre el círculo y el texto */
}

/* Centrar el botón */
.btn-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}


.carta-equipo {
    max-width: 400px; /* Define el ancho máximo de la tarjeta */
    margin: 20px auto; /* Centra la tarjeta y añade margen superior e inferior */
    border: 1px solid #ccc; /* Borde gris claro */
    border-radius: 8px; /* Bordes redondeados */
    padding: 20px; /* Espaciado interno */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Sombra para dar profundidad */
    background-color: white; /* Fondo blanco para contraste */
}

.carta-equipo h4 {
    text-align: center; /* Centra el título */
    margin-bottom: 20px; /* Añade espacio inferior */
    font-weight: bold; /* Texto en negrita */
    font-size: 1.3em;
}

.carta-equipo p {
    margin: 8px 0; /* Espaciado vertical entre párrafos */
    font-size: 1rem; /* Tamaño estándar del texto */
    color: #333; /* Color del texto */
}

.carta-equipo p strong {
    font-weight: bold; /* Negrita para los títulos */
}

.cotizacion {
    max-width: 600px; /* Define el ancho máximo del contenedor */
    margin: 20px auto; /* Centra el contenedor horizontalmente */
    padding: 20px; /* Espaciado interno */
    border: 1px solid #ccc; /* Borde gris claro */
    border-radius: 8px; /* Bordes redondeados */
    background-color: #f9f9f9; /* Fondo claro */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra para profundidad */
}

.cotizacion p {
    margin: 8px 0; /* Espaciado vertical entre párrafos */
    font-size: 1rem; /* Tamaño de fuente predeterminado */
    color: #333; /* Color del texto */
}

.cotizacion p strong {
    font-weight: bold; /* Texto en negrita */
}

.informacion {
    font-size: 1.1rem; /* Tamaño de fuente base */
    color: #333; /* Color del texto */
    margin: 8px 0; /* Espaciado vertical */
    font-weight: bold; /* Negrita para destacar el texto */
    text-align: left; /* Alineación a la izquierda */
}


/* Estilos responsivos para pantallas menores a 768px */
@media (max-width: 768px) {
    header {
        padding: 22px; 
    }

    /* Estilo para el título de la sección */
    h1 {
        font-size: 1.7em; /* Tamaño de fuente más pequeño para pantallas pequeñas */
        margin: 30px 0 20px; /* Espacio ajustado para pantallas pequeñas */
    }

    .alert {
        font-size: 0.9rem; /* Reduce el tamaño de la fuente */
        padding: 10px; /* Reduce el padding */
        margin-bottom: 15px; /* Reduce la separación inferior */
        border-radius: 3px; /* Bordes ligeramente más pequeños */
    }

    .cotizacion p {
        font-size: 0.9rem; /* Reduce el tamaño del texto en pantallas pequeñas */
    }

    .carta-equipo {
        max-width: 90%; /* Ocupa casi todo el ancho disponible */
        padding: 15px; /* Reduce el padding interno */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Sombra más ligera */
    }

    .informacion {
        font-size: 0.9rem; /* Reduce el tamaño de la fuente para pantallas pequeñas */
    }
    .carta-equipo h4 {
        font-size: 1.1rem; /* Reduce el tamaño del título */
        margin-bottom: 15px; /* Espacio más pequeño debajo del título */
    }

    .carta-equipo p {
        font-size: 0.9rem; /* Reduce el tamaño del texto */
        margin: 5px 0; /* Menor espaciado entre párrafos */
    }
}

/* Estilo base para botones y enlaces */
.btn-table, .btn-table a {
    padding: 10px 20px;
    background-color: #0d6efd;
    border: none;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 0;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    text-align: center;
    text-decoration: none; /* Elimina subrayado en enlaces */
    display: inline-block; /* Asegura que se comporte como un bloque en línea */
    line-height: 1; /* Ajusta la altura de la línea para igualar el diseño */
    box-sizing: border-box; /* Asegura que padding se incluya en las dimensiones */
    vertical-align: middle; /* Alineación consistente */
}

/* Hover para ambos */
.btn-table:hover {
    background-color: #0056b3;
}

/* Responsividad para pantallas mayores a 1920px */
@media (min-width: 1920px) {

    /* Ajuste para el header */
    header {
        padding: 30px; /* Aumenta el padding para pantallas grandes */
    }

    /* Estilo para el título de la sección */
    h1 {
        font-size: 3.5em; /* Aumenta el tamaño del título */
        margin: 50px 0 30px; /* Mayor espacio arriba y abajo del título */
    }

    .alert {
        font-size: 1.5rem; /* Aumenta el tamaño de la fuente */
        padding: 20px; /* Incrementa el padding */
        margin-bottom: 25px; /* Mayor separación inferior */
        border-radius: 6px; /* Bordes más redondeados */
    }

    /* Estilo para el subtítulo */
    h3 {
        font-size: 1.5em; /* Aumenta el tamaño de la fuente */
        margin: 50px 20px 20px 20px; /* Mayor margen */
    }

    /* Estilo para el botón */
    #btn {
        padding: 15px 30px; /* Aumenta el padding para el botón */
        font-size: 25px; /* Aumenta el tamaño de la fuente */
        margin-top: 20px; /* Mayor espacio superior */
        margin-bottom: 60px; /* Mayor espacio inferior */
    }

    .informacion {
        font-size: 2rem; /* Aumenta el tamaño de la fuente para pantallas grandes */
    }
    .cotizacion p {
        font-size: 1.5rem; /* Incrementa el tamaño del texto en pantallas grandes */
    }

    /* Estilo para el círculo dentro del botón */
    .circle {
        width: 40px; /* Aumenta el tamaño del círculo */
        height: 40px; /* Aumenta el tamaño del círculo */
        font-size: 25px; /* Aumenta el tamaño del signo "+" */
    }

    /* Centrado del contenedor del botón */
    .btn-container {
        margin-top: 30px; /* Más espacio arriba */
    }

    /* Ajuste para los botones de la tabla */
    .btn-table, .btn-table a {
        padding: 12px 25px; /* Aumenta el padding */
        font-size: 25px; /* Aumenta el tamaño de la fuente */
    }
    .carta-equipo {
        max-width: 600px; /* Aumenta el ancho máximo */
        padding: 30px; /* Incrementa el padding interno */
        border-radius: 10px; /* Bordes más redondeados */
        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.4); /* Sombra más pronunciada */
    }

    .carta-equipo h4 {
        font-size: 2rem; /* Incrementa el tamaño del título */
        margin-bottom: 30px; /* Mayor espacio debajo del título */
    }

    .carta-equipo p {
        font-size: 1.2rem; /* Incrementa el tamaño del texto */
        margin: 10px 0; /* Mayor espaciado entre párrafos */
    }
}