@media (max-width: 480px) {
    .enterprises > * {
        flex: 1 1 calc(50% - 10px); /* también dos columnas */
        max-width: calc(50% - 10px);
    }
}

/* Contact Section */

.contact-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.contact-card {
    flex: 1 1 45%;       /* 2 columnas por defecto */
    box-sizing: border-box; /* Incluye padding y border en el ancho */
    background: #1e2d4a;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    text-align: center;
    min-width: 150px;
}

.contact-card h3 {
    margin: 0 0 10px;
    font-size: 1.2rem;
}

.contact-card img {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
    border: 2px solid #ffffff;
}

.contact-card p {
    margin: 0;
    font-size: 1rem;
    color: #ffffff;
}

.datos-contacto{
    display: flex;
    padding: 0 15%;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Permite que los elementos se muevan a otra línea */
}

.datos-contacto > * {
    margin: 0 10px;
}

.datos-contacto > * {
    margin: 0 10px;
}

.datos-contacto > a{
    text-decoration: none; /* Quita subrayado */
    color: white; 
}

.datos-contacto > a > h2{
    color: white !important;
}


/* Móvil: 1 columna */
@media (max-width: 480px) {
    .contact-card {
        flex: 1 1 100%;
    }
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    color: #ccd6f6;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #a8b2d1;
    border-radius: 5px;
    background-color: #112240;
    color: #ccd6f6;
    box-sizing: border-box;
}

.form-group textarea {
    resize: vertical;
}

/* Footer */
footer {
    text-align: center;
    padding: 30px 0;
    background-color: #0a192f;
    color: #a8b2d1;
    font-size: 0.9em;
}

.bg-green {
    background-color: green;
}
.bg-blue {
    background-color: blue;
}
.bg-grey {
    background-color: grey;
}

/* Estilos CSS para los divs de ofertas */
.pricing-cards {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    max-width: 1000px;
    margin: 0 auto;
}

.card {
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 5px;
    width: 270px;
    text-align: center;
    transition: transform 0.2s ease;
}

.card:hover {
    transform: translateY(-5px);
}

.card .bg-card{
    background-color: #0a192f;
    padding: 1rem;
}

.card h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: white;
}

.card .price {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: white;
}

.card ul {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.card ul li {
    margin-bottom: 0.5rem;
}

.card .btn {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.75rem 1.5rem;
    background-color: #64ffda;
    color: #0a192f;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.card .btn:hover {
    background-color: #49ccb7;
}

.hidrogel-container {
    display: flex;
    flex-direction: column; /* Para que cada bloque ocupe su fila */
    gap: 20px;              /* Espacio entre bloques */
}

.hidrogel-content {
    display: flex;           /* Texto e imagen en línea */
    align-items: flex-start;
    gap: 20px;               /* Separación entre texto e imagen */
    flex-wrap: wrap;         /* Para que sea responsive en móviles */
}

.hidrogel-text {
    flex: 1;                 /* Ocupa todo el espacio disponible */
    width: 100%;
    text-align: start;
}

.hidrogel-img {
    width: 40%;
    display: flex;
    margin-top: 10px;
    justify-content: center; /* Centra horizontalmente */
    align-items: center;     /* Centra verticalmente si el div tiene altura */
}

.hidrogel-img img {
    max-width: 80%; /* Limita el tamaño máximo */
    width: auto;      /* Mantiene proporción y permite centrar */
    height: auto;
}

.hidrogel-image-full{
    background-image: url('../media/img/hidro23-fondo.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#benefits{
    background-image: linear-gradient(rgba(10, 25, 47, 0.4), rgba(10, 25, 47, 0.4)), url('/static/media/img/login_background.webp');
    background-size: cover;
}

.d_lg_block{
    display: block;
}
.d_lg_none{
    display: none;
}
.d_md_block{
    display: none;
}
.d_md_none{
    display: block;
}

/* Media query para 3 tarjetas en pantallas grandes */
@media (max-width: 992px) {
    .card-item {
        flex: 0 0 31%; /* Muestra 3 tarjetas en pantallas grandes */
    }
}


/* Responsive Design */
@media (max-width: 768px) {

    .popup-box {
        width: 60%;
    }

    nav div{
        width: 50% !important;
    }
    nav ul {
        flex-direction: column; /* Cambia a columna en pantallas pequeñas */
      }
    
    nav ul li {
        margin-bottom: 10px; /* Espacio entre los elementos en columna */
        margin-right: 0; /* Elimina el margen derecho en columna */
    }

    .logo {
        margin-bottom: 20px;
        object-fit: contain; /* Ajusta la imagen dentro sin deformarla */
    }

    .hero {
        flex-direction: column;
        text-align: center;
    }

    .hero-content {
        margin-right: 0;
        margin-bottom: 30px;
    }

    .hero-image {
        max-width: 80%;
    }
    
    .section{
        display: block !important;
    }

    .about-content {
        width: 100%; /* Hacemos que los divs ocupen el 100% en pantallas pequeñas */
        margin: 0;
        text-align: center; /* Centrado de texto en pantallas pequeñas */
    }

    .hidrogel-content {
        flex-direction: column; /* Poner texto e imagen en columnas */
        align-items: center;    /* Centra todo el contenido */
        text-align: center;
    }

    .hidrogel-img {
        width: 100%;            /* Ocupa toda la fila */
        justify-content: center; /* Centra la imagen */
        margin-top: 20px;        /* Espacio opcional entre texto e imagen */
    }

    .hidrogel-img img {
        max-width: 80%;         /* Ajusta tamaño según pantalla */
        height: auto;
    }

    .d_md_block{
        display: block;
    }
    .d_md_none{
        display: none;
    }

    .d_lg_block{
        display: none;
    }
    .d_lg_none{
        display: block;
    }


    .card-item {
        flex: 0 0 48%; /* Muestra 2 tarjetas en pantallas medianas */
    }
}

@media (max-width: 480px) {
    .popup-box {
        width: 80%;
    }
    
    .card-item {
        flex: 0 0 98%;
        margin-left: 0;
        margin-right: 0;
    }
    .features-cards {
       margin: 1%; /* Elimina el margen en pantallas muy pequeñas para que las tarjetas ocupen todo el ancho */
    }

    .datos-contacto {
        flex-direction: column; /* Coloca los elementos en columna */
        padding: 0 5%;          /* Ajusta el padding si quieres */
    }

    .datos-contacto > * {
        margin: 5px 0;           /* Espacio vertical entre elementos */
    }
}