section:not(:first-of-type) {
    margin-top: 100px !important;
}
a {
    text-decoration: none; /* Elimina el subrayado */
    color: inherit; /* Hereda el color del texto del contenedor */
}

/* Mostrar la manito cuando el enlace es hover */
a:hover {
    cursor: pointer; /* Cambia el cursor a una mano cuando se pase el mouse sobre el enlace */
}
@font-face {
    font-family: 'Titulos';
    src: url('../fonts/comic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.comic {
    font-family: 'Titulos', sans-serif;
    letter-spacing: 3px;
}

@font-face {
    font-family: 'parrafos';
    src: url('../fonts/docktrin.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.docktrin {
    font-family: 'parrafos', sans-serif;
    letter-spacing: 2px;
    font-size: 25px; 
}

#hero {
    height: 100vh; /* 100% del alto de la ventana */
    background-size: cover;
    background-position: center;
}

.cta-buttons button {
    border-radius: 25px; /* Bordes redondeados */
    transition: background-color 0.3s ease; /* Efecto de transición en hover */
}

.cta-buttons button:hover {
    background-color: rgba(0, 0, 0, 0.8); /* Fondo más oscuro al pasar el mouse */
}

body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.a {
    color: inherit; /* Esto hace que el enlace herede el color de su elemento padre */
    text-decoration: none; /* Esto elimina el subrayado */
}


 .logo-container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }

    .logo-container img {
        width: 250px;
    }

header {
    background-color: #f8f9fa;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    padding: 10px 0;
    transition: top 0.3s;
}

header nav ul {
    list-style-type: none;
    text-align: center;
    padding: 0;
}

header nav ul li {
    display: inline;
    margin: 0 20px;
}

header nav ul li a {
    text-decoration: none;
    color: #e1002c;
    font-size: 25px;
}

#hero {
    background-image: url('image1.jpg');
    background-size: cover;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.cta-buttons button {
    background-color: red;
    color: white;
    border: none;
    padding: 15px;
    margin: 5px;
    cursor: pointer;
}

.cta-buttons button:hover {
    background-color: #e74c3c;
}

.menu-images {
    display: flex;
    justify-content: space-around;
    margin: 20px 0;
}

#descubres h2 {
    text-align: center;
    margin: 20px 0;
}

#descubre button {
    display: block;
    margin: 10px auto;
    padding: 10px 20px;
    background-color: #f1c40f;
    border: none;
    cursor: pointer;
}

#descubre button:hover {
    background-color: #e67e22;
}

ul.list-unstyled li {
    display: inline-block;
    margin-right: -10px; /* Ajusta el espacio entre iconos */
}

.list-unstyled1 {
    padding-left: 0;
    list-style-type: none;
}

.list-unstyled1 li {
    margin-bottom: 10px; /* Asegura que los <li> estén bien separados */
}



/* MEDIA QUERIES PARA RESPONSIVIDAD */

/* Para que el logo se centre en dispositivos móviles */
@media (max-width: 768px) {
    .logo-container {
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }
    .logo-container img {
        width: 80%;
        height: auto;
    }

    /* Asegurarse de que los elementos de los menús sean más accesibles */
    .menu-toggle {
        display: block;
        cursor: pointer;
        font-size: 1.5rem;
    }

    nav ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-left: 0;
    }

    /* Centrar y hacer más legible el texto */
    .text-center {
        text-align: center !important;
    }

    /* Ajustes a las imágenes para que no se desborden */
    .hero img {
        max-width: 100%;
        height: auto;
    }

    /* Sección de contenido con imagen y texto */
    .col-md-6 {
        padding: 20px;
        text-align: center;
    }

    /* Botones con espacio adecuado en móviles */
    .cta-buttons a button {
        margin: 10px 0;
        width: 80%;
    }

    /* Ajuste en la sección de productos (imagenes) */
    .col-md-4 img {
        width: 100%;
        height: auto;
        margin-bottom: 10px;
    }

    .col-md-4 span {
        display: block;
        margin-top: 10px;
        font-size: 1.2rem;
    }
    
    .footer {
        font-size: 0.9rem;
    }
}

/* Ajuste de botones y modal */
@media (max-width: 500px) {
    .modal-content {
        width: 100%;
        margin: 0 auto;
    }

    .cta-buttons button {
        width: 80%;
        margin-bottom: 10px;
    }
}
@media (max-width: 768px) {
    iframe {
         border-radius: 1rem !importan;
        padding: 12px;
        width: 100% !important;
        height: 250px !important; /* Puedes ajustar el alto según lo desees */
    }
}

/* Asegurando que en pantallas más grandes se vea bien también */
@media (min-width: 769px) {
    iframe {
        border-radius: 1rem !importan;
        padding: 50px;
        width: 100% !important;
        height: 450px !important; /* Puedes ajustar este tamaño también */
    }
}