body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    height: auto;
    background-size: cover;
    overflow-x: hidden;
    width: 100%;
}

label{
    color:black;
}
.cookie-modal-content p{
    color: black;
}
/* 🎨 Estilos generales */
body {
    font-family: Arial, sans-serif;
}

/* 📌 Estilos del banner de cookies */
.cookie-banner {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    max-width: 900px;
    height: 60px;
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    opacity: 0;
    animation: slideUp 0.5s ease-out forwards;
}

.cookie-content {
    font-size: 14px;
    flex-grow: 1;
}

.cookie-buttons {
    display: flex;
    gap: 10px;
}

.cookie-banner button {
    background: #ff9800;
    border: none;
    padding: 8px 15px;
    cursor: pointer;
    color: white;
    font-weight: bold;
    border-radius: 5px;
    transition: 0.3s;
}

.cookie-banner button:hover {
    background: #e68900;
}

/* 📌 Modal de Configuración */
.cookie-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    display: none;
    width: 90%;
    max-width: 400px;
    animation: fadeIn 0.3s ease-in-out;
}

.cookie-modal h3 {
    margin-top: 0;
    color: #333;
}

.cookie-modal label {
    display: block;
    margin: 10px 0;
    font-size: 14px;
}

.modal-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
}

.modal-buttons button {
    padding: 8px 15px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    font-weight: bold;
}

#save-cookies {
    background: #4caf50;
    color: white;
}

#close-modal {
    background: #f44336;
    color: white;
}

/* ✨ Animaciones */
@keyframes fadeIn {
    from { opacity: 0; transform: translate(-50%, 10px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes slideUp {
    from { opacity: 0; transform: translate(-50%, 30px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}
       /* Estilos para el footer en formato PC */
       .footer-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        padding: 20px;
    }

    p {
padding-left: 0px;
padding-right: 0px;
margin-left: 0px;
margin-right: 0px;
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
font-size: 16px;
}

    
    /* Estilos para el footer en formato móvil */
    @media (max-width: 768px) {
        .footer-container {
            flex-direction: column;
            text-align: center;
        }
    }
          html,body{
            overflow-x: hidden;
          }
      /* Estilos del Footer */
      body {
                margin: 0;
                font-family: Arial, sans-serif;
                background-color: #1a1a1a;
                color: #000000;
            }
            footer {
                background-color: #1a1a1a;

                text-align: center;
            }
            .footer-container {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;
                padding: 20px;
            }
            .footer-section {
                flex: 1;
                min-width: 250px;
                margin: 10px;
            }
            .footer-section h3 {
                margin-bottom: 10px;
                font-size: 18px;
                font-weight: 0;
            }
            .footer-section hr {
                width: auto;
                border: 1px solid darkred;
                opacity: 1;
            }
            .logo {
                max-width: 100px;
                margin: 10px 0;
            }
            .footer-bottom {
          
                padding-top: 10px;
                display: flex;
                flex-direction: column;
                align-items: center;
            }
            .social-icons i {
                font-size: 24px;
                margin: 5px;
                cursor: pointer;
            }
            .social-icons i:hover {
                color: #007bff;
            }
            @media (max-width: 768px) {
                .footer-container {
                    flex-direction: column;
                    text-align: center;
                }
            }
            .footer-section a{
              color: white;
            }
            .footer-section p{
              text-align: left;
              margin: 0px 0px 10px 70px;
              padding:0px;
              margin-right: 50px;


            }
            .footer-section h3{
              text-align: left;
             font-weight: 400;
             margin: 0px 0px 10px 70px;
             padding:0px;
             
            }
            
  
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        .search-bar {
            position: relative;
            display: flex;
            align-items: center;
        }
        .search-form {
            display: flex;
            align-items: center;
            position: relative;
            border: 1px solid #ccc;
            border-radius: 30px;
            background-color: white;
            padding: 2px;
        }
        .search-input {
            width: 0;
            opacity: 0;
            padding: 0;
            border: none;
            outline: none;
            transition: width 0.4s ease, opacity 0.4s ease;
            background: transparent;
            font-size: 16px;
        }
        .search-button {
            background: darkred !important;
            border: none !important;
            padding: 0 !important;
            margin: 0 !important;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: none !important;
            border-radius: 50%;
        }
        .search-button img {
            width: 35px;
            height: 35px;
            display: block;
            filter: none !important;
            opacity: 1 !important;
        }
        .search-button:focus,
        .search-button:active {
            outline: none !important;
            box-shadow: none !important;
        }
        .search-bar.activo .search-input {
            width: 200px;
            opacity: 1;
            padding: 5px;
        }
        .search-button img:hover {
            filter: brightness(0.8);
        }
        .caja2 {
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
            position: relative;
            opacity: 0;
            animation: fadeIn 1s ease-out forwards, slideIn 1s ease-out forwards;
        }
        .titulo-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        #toggle2 {
            display: none;
        }
        .toggle-label2 {
            background: #b90101;
            color: white;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            font-size: 20px;
            font-weight: bold;
            transition: 0.3s;
        }
        #toggle:checked + .toggle-label {
            transform: rotate(45deg);
            background: #ff0000;
        }
        .contenido-oculto {
            display: none;
            margin-top: 15px;
        }
        #toggle:checked ~ .contenido-oculto {
            display: block;
        }
        #toggle {
            display: none;
        }
        .toggle-label {
            background: #b90101;
            color: white;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            font-size: 20px;
            font-weight: bold;
            transition: 0.3s;
        }
        #toggle2:checked + .toggle-label {
            transform: rotate(45deg);
            background: #ff0000;
        }
        .contenido-oculto {
            display: none;
            margin-top: 15px;
        }
        #toggle2:checked ~ .contenido-oculto {
            display: block;
        }
        body {
            background-color: white;
        }
        #tituloindex {
            font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
            color: rgb(255, 255, 255);
            font-size: 2.5rem;
            text-align: center;
            letter-spacing: 2px;
            margin-bottom: 30px;
            text-transform: uppercase;
            line-height: 1.3;
            padding-bottom: 15px;
            padding-top: 10px;
        }
        .cajaintro {
            background: #ffffff;
            padding: 40px 60px;
            margin: 0 auto;
            max-width: 1000px;
            border-radius: 15px;
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease-in-out;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .cajaintro:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }
        .intro-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 1s ease-out forwards;
        }
        @keyframes fadeInUp {
            0% {
                opacity: 0;
                transform: translateY(20px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }
        @keyframes float {
            0% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
            100% {
                transform: translateY(0);
            }
        }
        .intro-content img {
            width: 35%;
            margin-left: 20px;
            border-radius: 10px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
            animation: float 3s ease-in-out infinite;
        }
        .intro-content img:hover {
            transform: translateY(-10px);
            transition: transform 0.3s ease;
        }
        .intro-content p {
            width: 55%;
            color: #181818;
            font-size: 1.2rem;
            line-height: 1.6;
            font-weight: 400;
            text-align: justify;
            margin-left: 20px;
        }
        .intro-content p:hover {
            transform: translateY(-10px);
            transition: transform 0.3s ease;
        }
        .cajaintro p {
            color: #181818;
            font-size: 1.2rem;
            line-height: 1.6;
            font-weight: 400;
            text-align: justify;
            margin-bottom: 20px;
        }
        .cajaintro a {
            color: #cc0202;
            font-weight: 600;
            text-decoration: none;
            transition: color 0.3s ease, border-bottom 0.3s ease;
            border-bottom: 2px solid transparent;
        }
        .cajaintro a:hover {
            color: #cc0202;
            border-bottom: 2px solid #cc0202;
        }
        .cajaintro img {
            width: 100%;
            border-radius: 10px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }
        .cajaintro img:hover {
            transform: scale(1.05);
        }
        .cajaintro {
            background: linear-gradient(135deg, #ffffff, #ebfffe);
        }
        .carousel-item {
            transition: transform 3s ease-in-out, opacity 3s ease-in-out;
        }
        .carousel-item-next,
        .carousel-item-prev,
        .carousel-item.active {
            display: block;
            opacity: 1;
        }
        .carousel-item-next.carousel-item-left,
        .carousel-item-prev.carousel-item-right {
            opacity: 0;
        }
        .carousel-item img {
            width: 100%;
            height: auto;
            transition: opacity 1s ease;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
            opacity: 0.8;
        }
        .carousel-item img:hover {
            opacity: 1;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        }
        .carousel-caption {
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: white;
            width: 80%;
            padding: 20px;
            box-sizing: border-box;
            background: linear-gradient(to right, rgba(0, 0, 0, 0.7), transparent);
            border-radius: 10px;
            margin-bottom: 20px;
        }
        .carousel-caption h3 {
            font-size: 2.5rem;
            font-weight: 600;
            text-shadow: 4px 4px 15px rgba(0, 0, 0, 0.7);
            letter-spacing: 2px;
            margin-bottom: 20px;
            opacity: 1;
            color: white;
        }
        .carousel-caption p {
            font-size: 1.2rem;
            line-height: 1.6;
            text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
            opacity: 0.9;
            color: white;
            margin-bottom: 20px;
        }
        .highlight-word {
            color: #FFD700;
            font-weight: bold;
            transition: color 0.3s ease, transform 0.3s ease;
            text-decoration: none;
        }
        .highlight-word:hover {
            color: #FF6347;
            transform: scale(1.1);
        }
        .carousel-item.active .carousel-caption h3,
        .carousel-item.active .carousel-caption p {
            animation: fadeInUp 1s ease-out;
        }
        @keyframes fadeInUp {
            0% {
                opacity: 0;
                transform: translateY(20px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }
        #carouselExample .carousel-control-prev-icon,
        #carouselExample .carousel-control-next-icon {
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
            padding: 10px;
        }
        #carouselExample .carousel-control-prev-icon:hover,
        #carouselExample .carousel-control-next-icon:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }
        #carouselExample .carousel-item {
            position: relative;
        }
        #carouselExample .carousel-caption {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 30px 40px;
            border-radius: 15px;
            text-align: center;
            font-family: 'Roboto', sans-serif;
            font-size: 1.2rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
            transition: all 0.3s ease;
        }
        #carouselExample .carousel-item img {
            width: 100%;
            height: auto;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            transition: transform 0.3s ease;
        }
        #carouselExample .carousel-item img:hover {
            transform: scale(1.05);
        }
        #carouselExample .carousel-caption:hover {
            background-color: rgba(0, 0, 0, 0.7);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
        }
        #carouselExample .carousel-caption h3 {
            font-family: 'Montserrat', sans-serif;
            font-size: 2rem;
            font-weight: 600;
            margin-bottom: 15px;
        }
        #carouselExample .carousel-caption p {
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.6;
        }
        #carouselExample .carousel-control-prev-icon,
        #carouselExample .carousel-control-next-icon {
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
            padding: 10px;
        }
        #carouselExample .carousel-control-prev-icon:hover,
        #carouselExample .carousel-control-next-icon:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }
        .carousel-item {
            position: relative;
        }
        .carousel-caption {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 15px;
            border-radius: 5px;
            text-align: center;
        }
        .carousel-item img {
            width: 100%;
            height: auto;
        }
        .carousel-control-prev-icon,
        .carousel-control-next-icon {
            background-color: black;
        }
        .caja2 h3 {
            font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
            color: darkred;
            font-size: 25px;
        }
        .caja3 h3 {
            font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
            color: darkred;
            font-size: 25px;
        }
        .down-arrow {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 40px;
            color: rgba(248, 238, 238, 0.8);
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            animation: bounce 2s infinite;
        }
        .down-arrow:hover {
            color: #ffffff;
            transform: translateX(-50%) scale(1.2);
        }
        @keyframes bounce {
            0%,
            100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
        }
        html {
            scroll-behavior: smooth;
        }
        .imagen {
            padding-right: 100px;
        }
        .carousel-item img {
            height: 560px;
            object-fit: cover;
            padding-top: 24px;
            box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.5);
            filter: drop-shadow(0px 10px 30px rgba(0, 0, 0, 0.7));
        }
        .contenido-oculto2 li {
            font-size: 18px;
            color: rgb(19, 18, 18);
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            margin-left: 90px;
        }
        a {
            list-style: none;
        }
        .carousel-container {
            position: relative;
            max-width: 80%;
            overflow: hidden;
        }
        .shadow-left {
            position: absolute;
            top: 0;
            left: 0;
            width: 15%;
            height: 100%;
            background: linear-gradient(to right, rgba(0, 0, 0, 0.7), transparent);
            z-index: 10;
        }
        .shadow-right {
            position: absolute;
            top: 0;
            right: 0;
            width: 15%;
            height: 100%;
            background: linear-gradient(to left, rgba(0, 0, 0, 0.7), transparent);
            z-index: 10;
        }
        .imagen1 {
            position: relative;
            display: inline-block;
            width: 100%;
        }
        .imagen1 img {
            width: 100%;
            display: block;
        }
        .imagen1::before {
            content: "";
            position: absolute;
            top: 27%;
            left: 0;
            width: 50%;
            height: 73%;
            background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
            pointer-events: none;
        }
        .top-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #fff;
            padding: 10px 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        .menu {
            list-style: none;
            display: flex;
            gap: 20px;
            padding: 0;
            margin: 0;
        }
        .menu li {
            position: relative;
        }
        .menu a {
            text-decoration: none;
            color: #333;
            font-weight: bold;
            padding: 10px;
            transition: color 0.3s;
        }
        .menu a:hover {
            color: #d44747;
        }
        .submenu {
            display: none;
            position: absolute;
            background: #ffffff;
            list-style: none;
            padding: 10px;
            border-radius: 5px;
            top: 100%;
            left: 0;
            z-index: 100;
        }
        .menu li:hover .submenu {
            display: block;
        }
        
        .menu-toggle {
            display: none;
            font-size: 24px;
            background: none;
            border: none;
            cursor: pointer;
            z-index: 1001;
        }
        .caja3 {
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
            position: relative;
            opacity: 0;
            animation: fadeIn 1s ease-out forwards, slideIn 1s ease-out forwards;
        }
        
        .social-icons i {
        font-size: 24px;
        margin: 5px;
        cursor: pointer;
    }
    .social-icons i:hover {
        color: #007bff;
    }
.social-icons {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15px;
        list-style: none;
        padding: 0;
    }

    .social-icons a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        text-decoration: none;
        color: white;
        font-size: 20px;
        transition: background-color 0.3s ease, transform 0.3s ease;
    }

    .facebook { background: #3b5998; }
    .twitter { background: #1da1f2; }
    .instagram { background: #e4405f; }
    .linkedin { background: #0077b5; }

    .social-icons a:hover {
        transform: scale(1.1);
        opacity: 0.8;
    }


/* Iconos sociales modernos */
.social-icons a {
position: relative;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.social-icons a::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.2);
transform: skewX(-30deg);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.social-icons a:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.social-icons a:hover::before {
left: 100%;
}

.social-icons {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
list-style: none;
padding: 0;
}

        #toggle2 {
            display: none;
        }
        .toggle-label2 {
            background: #b90101;
            color: white;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            font-size: 20px;
            font-weight: bold;
            transition: 0.3s;
        }
        #toggle2:checked + .toggle-label2 {
            transform: rotate(45deg);
            background: #ff0000;
        }
        .contenido-oculto2 {
            display: none;
            margin-top: 15px;
        }
        #toggle2:checked ~ .contenido-oculto2 {
            display: block;
        }
        .scroll-animation {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 1s ease-out, transform 1s ease-out;
        }
        .scroll-animation.visible {
            opacity: 1;
            transform: translateY(0);
        }
        @keyframes fadeIn {
            0% {
                opacity: 0;
                transform: translateY(20px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }
        @keyframes slideIn {
            0% {
                opacity: 0;
                transform: translateX(-100%);
            }
            100% {
                opacity: 1;
                transform: translateX(0);
            }
        }
        .animated-box {
            opacity: 0;
            animation: fadeIn 1s ease-out forwards, slideIn 1s ease-out forwards;
        }
        .animated-box:nth-child(odd) {
            animation-delay: 0.5s;
        }
        .animated-box:nth-child(even) {
            animation-delay: 1s;
        }
        .animated-image img {
            animation: zoomIn 1s ease-out forwards;
        }
        @keyframes zoomIn {
            0% {
                transform: scale(0.8);
                opacity: 0;
            }
            100% {
                transform: scale(1);
                opacity: 1;
            }
        }
        @keyframes fadeInText {
            0% {
                opacity: 0;
                transform: translateY(10px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .animated-text {
            animation: fadeInText 1s ease-out forwards;
            margin-left: 10px;
        }
        .lista-emojis {
            list-style: none;
            padding: 0;
            font-size: 16px;
        }
        .lista-emojis3 li {
            position: relative;
            padding-left: 35px;
            margin-bottom: 15px;
            animation: fadeInText 1s ease-out forwards;
        }
        .lista-emojis3 li::before {
            content: '✔';
            position: absolute;
            left: 0;
            color: darkred;
            font-size: 18px;
        }
        .lista-emojis li {
            position: relative;
            padding-left: 35px;
            margin-bottom: 15px;
            animation: fadeInText 1s ease-out forwards;
        }
        .lista-emojis li::before {
            content: '✔';
            position: absolute;
            left: 0;
            color: darkred;
            font-size: 18px;
        }

              
        @media screen and (max-width: 320px) {
            .intro-content {
              padding: 10px;
            }
          
            .intro-content img {
              width: 100%;
              margin: 10px 0;
            }
          
            .carousel-caption h3 {
              font-size: 1.2rem;
            }
          
            .menu-toggle {
              top: 10px;
              right: 10px;
            }
          
            .footer-section {
              padding: 20px 10px;
            }
          }
          
          /* Móviles medianos y grandes */
          @media screen and (min-width: 321px) and (max-width: 767px) {
            .intro-content {
              padding: 15px;
            }
          
            .intro-content img {
              width: 90%;
              margin: 15px auto;
            }
          
            .carousel-caption {
              width: 90%;
              padding: 15px;
            }
          
            .carousel-caption h3 {
              font-size: 1.5rem;
            }
          
            .footer-section {
              padding: 25px 15px;
            }
          }
          
          /* Tablets */
          @media screen and (min-width: 768px) and (max-width: 1023px) {
            .intro-content {
              flex-direction: row;
              padding: 20px;
            }
          
            .intro-content img {
              width: 45%;
            }
          
            .intro-content p {
              width: 50%;
            }
          
            .carousel-caption {
              width: 80%;
            }
          
            .menu {
              display: flex !important;
            }
          
            .menu-toggle {
              display: none;
            }
          
            .footer-section {
              flex: 1;
            }
          }
          
          /* Laptops y pantallas medianas */
          @media screen and (min-width: 1024px) and (max-width: 1366px) {
            .intro-content {
              max-width: 90%;
              margin: 0 auto;
            }
          
            .carousel-caption {
              width: 70%;
            }
          
            .caja2, .caja3 {
              max-width: 90%;
              margin: 20px auto;
            }
          }
          
          /* Pantallas grandes */
          @media screen and (min-width: 1367px) {
            .intro-content {
              max-width: 1200px;
              margin: 0 auto;
            }
          
            .carousel-caption {
              width: 60%;
            }
          
            .caja2, .caja3 {
              max-width: 1200px;
              margin: 30px auto;
            }
          }
          
          /* Ajustes de navegación responsive */
          @media screen and (max-width: 767px) {
            .barra-navegacion {
              position: fixed;
              top: 0;
              left: -100%;
              width: 80%;
              height: 100vh;
              background: white;
              transition: 0.3s;
              z-index: 1000;
              overflow-y: auto;
              box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
            }
          
            .barra-navegacion.active {
              left: 0;
            }
          
            .menu {
              flex-direction: column;
              padding: 80px 20px 20px;
            }
          
            .menu li {
              width: 100%;
              margin: 10px 0;
            }
          
            .submenu {
              position: static;
              width: 100%;
              box-shadow: none;
              background: #f8f8f8;
              padding: 10px;
            }
          
            .menu-toggle {
              display: block;
              position: fixed;
              right: 20px;
              top: 20px;
              z-index: 1001;
            }
          }
          
          /* Ajustes de contenido responsive */
          @media screen and (max-width: 767px) {
            .tipo-impresora1 {
              flex-direction: column;
            }
          
            .tipo-impresora1 .contenido,
            .tipo-impresora1 .imagen {
              width: 100%;
              padding: 10px;
            }
          
            .lista-emojis li {
              margin-left: 0;
              padding-left: 25px;
            }
          
            .carousel-item img {
              height: auto;
              min-height: 300px;
              object-fit: cover;
            }
          }
          
          /* Ajustes de footer responsive */
          @media screen and (max-width: 767px) {
            footer {
              padding: 20px;
            }
          
            footer ul {
              margin-left: 0;
              text-align: center;
            }
          
            .footer-contact p {
              margin-left: 0;
              text-align: center;
            }
          
            .social-icons {
              justify-content: center;
              margin: 20px 0;
            }
          
            .footer-logo img {
              max-width: 200px;
            }
          }
          
          /* Ajustes de orientación */
          @media screen and (orientation: landscape) and (max-width: 767px) {
            .carousel-item img {
              height: 200px;
            }
          
            .carousel-caption {
              padding: 10px;
            }
          
            .carousel-caption h3 {
              font-size: 1.2rem;
              margin-bottom: 5px;
            }
          }
          
          /* Soporte para pantallas con alto DPI */
          @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
            img {
              image-rendering: -webkit-optimize-contrast;
            }
          }
          
          /* Ajustes para dispositivos con modo oscuro */
          @media (prefers-color-scheme: dark) {
            .search-form {
              background: rgba(255, 255, 255, 0.05);
            }
          
            .caja2, .caja3 {
              background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
              box-shadow: 20px 20px 60px #151515, -20px -20px 60px #2f2f2f;
            }
          }
          
          /* Ajustes de accesibilidad */
          @media (prefers-reduced-motion: reduce) {
            * {
              animation: none !important;
              transition: none !important;
            }
          }
              /* ... keep existing code (styles before media queries) */
              
              .menu li {
            position: relative;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
          }
          
          .menu li:hover {
            transform: translateY(-3px);
          }
          
          .menu a {
            position: relative;
            overflow: hidden;
          }
          
          .menu a::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 2px;
            bottom: 0;
            left: -100%;
            background: linear-gradient(90deg, transparent, darkred, transparent);
            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
          }
          
          .menu a:hover::before {
            left: 0;
            animation: shimmer 2s infinite;
          }
          
          @keyframes shimmer {
            0% { opacity: 0.5; }
            50% { opacity: 1; }
            100% { opacity: 0.5; }
          }
          
          /* Mejora del carrusel con transiciones suaves */
          .carousel-item {
            transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1), opacity 1s ease;
          }
          
          .carousel-caption {
            transform: translateY(30px);
            opacity: 0;
            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(8px);
            border-radius: 15px;
            padding: 20px;
            border: 1px solid rgba(255, 255, 255, 0.1);
          }
          
          .carousel-item.active .carousel-caption {
            transform: translateY(0);
            opacity: 1;
          }
          
          /* Animaciones elegantes para imágenes */
          img {
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
          }
          
          img:hover {
            transform: scale(1.03) translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
          }
          
          /* Efecto profesional para las cajas de contenido */
          .caja2, .caja3 {
            position: relative;
            background: linear-gradient(145deg, #ffffff, #f5f5f5);
            box-shadow: 20px 20px 60px #d9d9d9, -20px -20px 60px #ffffff;
            border-radius: 15px;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: hidden;
          }
          
          .caja2:hover, .caja3:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
          }
          
          /* Animación profesional para los botones */
          .toggle-label, .toggle-label2 {
            background: linear-gradient(145deg, #cc0000, #990000);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
          }
          
          .toggle-label:hover, .toggle-label2:hover {
            transform: rotate(180deg) scale(1.1);
            background: linear-gradient(145deg, #ff0000, #cc0000);
          }
          
          /* Animación para la lista de elementos */
          .lista-emojis li {
            position: relative;
            padding-left: 30px;
            margin: 15px 0;
            opacity: 0;
            transform: translateX(-20px);
            animation: fadeInLeft 0.6s ease forwards;
            animation-delay: calc(var(--li-index) * 0.15s);
          }
          
          .lista-emojis li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: darkred;
            font-size: 1.2em;
            opacity: 0;
            transform: scale(0);
            animation: scaleIn 0.3s ease forwards;
            animation-delay: calc(var(--li-index) * 0.15s + 0.3s);
          }
          
          @keyframes scaleIn {
            from {
              transform: scale(0);
              opacity: 0;
            }
            to {
              transform: scale(1);
              opacity: 1;
            }
          }
          
          
          /* Barra de búsqueda moderna */
          .search-form {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
          }
          
          .search-form:hover {
            background: rgba(255, 255, 255, 0.15);
            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
          }
          
          .search-input {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            background: transparent;
          }
          
          /* Efecto de parallax suave */
          .bara {
            transform-style: preserve-3d;
            perspective: 1000px;
          }
          
          .bara > * {
            transform: translateZ(0);
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
          }
          
          /* Animación del logo */
          .baraimg img {
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.2));
          }
          
          .baraimg img:hover {
            transform: scale(1.05) rotate(-2deg);
            filter: drop-shadow(0 8px 25px rgba(0, 0, 0, 0.3));
          }
          
          /* Scroll suave */
          html {
            scroll-behavior: smooth;
          }
          
          /* Loading skeleton animation */
          @keyframes shimmerBackground {
            0% { background-position: -1000px 0; }
            100% { background-position: 1000px 0; }
          }
          
          .loading {
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 1000px 100%;
            animation: shimmerBackground 2s infinite linear;
          }
          
          a{
              text-decoration: none;
              color:#181818;
          }
          
          a:hover {
              color: darkred
          }
          
          
              
          * {
                      box-sizing: border-box;
                      margin: 0;
                      padding: 0;
                  }
          
                  .search-bar {
                      position: relative;
                      display: flex;
                      align-items: center;
                  }
          
                  .search-form {
                      display: flex;
                      align-items: center;
                      position: relative;
                      border: 1px solid #ccc;
                      border-radius: 30px;
                      background-color: white;
                      padding: 2px;
                  }
          
                  /* Ocultar input inicialmente */
                  .search-input {
                      width: 0;
                      opacity: 0;
                      padding: 0;
                      border: none;
                      outline: none;
                      transition: width 0.4s ease, opacity 0.4s ease;
                      background: transparent;
                      font-size: 16px;
                  }
          
                  /* Botón de lupa */
                  .search-button {
              background: darkred !important; /* Quita cualquier fondo */
              border: none !important; /* Elimina bordes extraños */
              padding: 0 !important; /* Elimina espacios innecesarios */
              margin: 0 !important;
              width: 40px; /* Ajusta el tamaño si es necesario */
              height: 40px;
              display: flex;
              align-items: center;
              justify-content: center;
              box-shadow: none !important; /* Quita cualquier sombra */
              border-radius: 50%; /* Hace que sea un círculo */
          
          }
          
          .search-button img {
              width: 35px;
              height: 35px;
              display: block;
              filter: none !important; /* Evita que se vuelva blanca */
              opacity: 1 !important; /* Asegura que sea visible */
          }
          
          .search-button:focus,
          .search-button:active {
              outline: none !important;
              box-shadow: none !important;
          }
          
                  /* Mostrar input cuando la clase 'activo' está presente */
                  .search-bar.activo .search-input {
                      width: 200px;
                      opacity: 1;
                      padding: 5px;
                  }
          
                  /* Evitar que la lupa cambie de color raro */
                  .search-button img:hover {
                      filter: brightness(0.8);
                  }
          
                 .caja2 {
                  background-color: white;    
                  padding: 20px;
                border-radius: 10px;
                box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
                position: relative;
                opacity: 0;
                animation: fadeIn 1s ease-out forwards, slideIn 1s ease-out forwards;
            }
          
            /* Contenedor para alinear el título y el botón */
            .titulo-container {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
          
          
          
            /* Ocultar checkbox */
            #toggle2 {
                display: none;
            }
          
            /* Botón de desplegar */
            .toggle-label2 {
                background: #b90101;
                color: white;
                border-radius: 50%;
                width: 30px;
                height: 30px;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                font-size: 20px;
                font-weight: bold;
                transition: 0.3s;
            }
          
            /* Efecto cuando se presiona */
            #toggle:checked + .toggle-label {
                transform: rotate(45deg); /* Convierte "+" en "x" */
                background: #ff0000;
            }
          
            /* Contenido oculto por defecto */
            .contenido-oculto {
                display: none;
                margin-top: 15px;
            }
          
            /* Mostrar contenido cuando el checkbox está activado */
            #toggle:checked ~ .contenido-oculto {
                display: block;
            }
          
            /* Ocultar checkbox */
            #toggle {
                display: none;
            }
          
            /* Botón de desplegar */
            .toggle-label {
                background: #b90101;
                color: white;
                border-radius: 50%;
                width: 30px;
                height: 30px;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                font-size: 20px;
                font-weight: bold;
                transition: 0.3s;
            }
          
            /* Efecto cuando se presiona */
            #toggle2:checked + .toggle-label {
                transform: rotate(45deg); /* Convierte "+" en "x" */
                background: #ff0000;
            }
          
            /* Contenido oculto por defecto */
            .contenido-oculto {
                display: none;
                margin-top: 15px;
            }
          
            /* Mostrar contenido cuando el checkbox está activado */
            #toggle2:checked ~ .contenido-oculto {
                display: block;
            }
                      body{
                          background-color: white;
                      }
          /* Título principal */
          #tituloindex {
              font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
              color: rgb(255, 255, 255); /* Fuente elegante serif para un look más profesional */
              font-size: 2.5rem; /* Tamaño grande para un impacto visual inmediato */
              text-align: center; /* Centrado */
              letter-spacing: 2px; /* Espaciado de letras para que se vea más limpio */
              margin-bottom: 30px; /* Espaciado debajo */
              text-transform: uppercase; /* Mayúsculas para mayor elegancia */
              line-height: 1.3;
              padding-bottom: 15px; /* Espaciado para que la línea se vea bien */
              padding-top: 10px;
          }
          
          /* Caja de contenido */
          .cajaintro {
              background: #ffffff; /* Fondo blanco para contraste claro */
              padding: 40px 60px; /* Generoso padding para un diseño cómodo */
              margin: 0 auto; /* Centrado en la página */
              max-width: 1000px; /* Máximo tamaño */
              border-radius: 15px; /* Bordes redondeados */
              box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1); /* Sombra sutil pero impactante */
              transition: all 0.3s ease-in-out; /* Transición suave */
              display: flex;
              justify-content: space-between;
              align-items: center;
          }
          
          /* Hover sobre la caja */
          .cajaintro:hover {
              transform: translateY(-10px); /* Ligeramente levanta la caja al pasar el mouse */
              box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); /* Más sombra al pasar el mouse */
          }
          
          .intro-content {
              display: flex;
              justify-content: space-between;
              align-items: center;
              width: 100%;
              opacity: 0;
              transform: translateY(20px);
              animation: fadeInUp 1s ease-out forwards;
              
          }
          
          @keyframes fadeInUp {
              0% {
                  opacity: 0;
                  transform: translateY(20px);
              }
              100% {
                  opacity: 1;
                  transform: translateY(0);
              }
          }
          
          @keyframes float {
              0% {
                  transform: translateY(0);
              }
              50% {
                  transform: translateY(-10px);
              }
              100% {
                  transform: translateY(0);
              }
          }
          
          .intro-content img {
              width: 35%;
              margin-left: 20px;
              border-radius: 10px;
              box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
              transition: transform 0.3s ease;
              animation: float 3s ease-in-out infinite;
          }
          
          .intro-content img:hover {
              transform: translateY(-10px);
              transition: transform 0.3s ease;
          }
          
          .intro-content p {
              width: 55%;
              color: #181818;
              font-size: 1.2rem;
              line-height: 1.6;
              font-weight: 400;
              text-align: justify;
              margin-left: 20px;
          }
          
          .intro-content p:hover {
              transform: translateY(-10px);
              transition: transform 0.3s ease;
          }
          
          /* Estilo de los párrafos dentro de la caja */
          .cajaintro p {
              color: #181818; /* Texto más suave para los párrafos */
              font-size: 1.2rem; /* Tamaño de texto cómodo */
              line-height: 1.6; /* Espaciado entre líneas para facilitar lectura */
              font-weight: 400; /* Normal, para un buen balance */
              text-align: justify; /* Justificado para un formato más ordenado */
              margin-bottom: 20px; /* Espaciado entre párrafos */
          }
          
          /* Estilo de los enlaces dentro de la caja */
          .cajaintro a {
              color: #cc0202; /* Azul brillante para los enlaces */
              font-weight: 600; /* Más peso para los enlaces */
              text-decoration: none; /* Eliminar subrayado por defecto */
              transition: color 0.3s ease, border-bottom 0.3s ease; /* Transición suave */
              border-bottom: 2px solid transparent; /* Subrayado invisible inicialmente */
          }
          
          /* Hover en enlaces */
          .cajaintro a:hover {
              color: #cc0202; /* Cambio de color en hover */
              border-bottom: 2px solid #cc0202; /* Subrayado azul al pasar el mouse */
          }
          
          /* Sombra en imagen o elementos destacados */
          .cajaintro img {
              width: 100%; /* Imagen ocupa el 100% del ancho */
              border-radius: 10px; /* Bordes redondeados para imágenes */
              box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* Sombra sutil en imágenes */
              transition: transform 0.3s ease; /* Efecto de zoom suave */
          }
          
          /* Hover en imágenes */
          .cajaintro img:hover {
              transform: scale(1.05); /* Ligeramente aumenta el tamaño de la imagen */
          }
          
          /* Fondo de la caja con un toque más estilizado */
          .cajaintro {
              background: linear-gradient(135deg, #ffffff, #ebfffe); /* Degradado sutil para un look más moderno */
          }
                      /* Estilos para el carrusel */
          
                  /* Estilos para el carrusel */
               /* Carrusel de imágenes */
               .carousel-item {
              transition: transform 3s ease-in-out, opacity 3s ease-in-out;
          }
          
          .carousel-item-next,
          .carousel-item-prev,
          .carousel-item.active {
              display: block;
              opacity: 1;
          }
          
          .carousel-item-next.carousel-item-left,
          .carousel-item-prev.carousel-item-right {
              opacity: 0;
          }
          
          /* Sombra sutil en las imágenes */
          .carousel-item img {
              width: 100%;
              height: auto;
              transition: opacity 1s ease;
              box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); /* Sombra más suave para un efecto elegante */
              opacity: 0.8;
          }
          
          .carousel-item img:hover {
              opacity: 1;
              box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* Más sombra al hacer hover */
          }
          
          /* Carrusel Caption - Texto */
          .carousel-caption {
              position: absolute;
              top: 40%; /* Subimos un poco el texto para que no quede tan pegado al centro */
              left: 50%;
              transform: translate(-50%, -50%);
              text-align: center;
              color: white;
              width: 80%; /* Reducido el ancho para que el texto no se vea tan estirado */
              padding: 20px;
              box-sizing: border-box;
              background: rgba(0, 0, 0, 0.6); /* Fondo oscuro semi-transparente */
              border-radius: 10px; /* Bordes redondeados para el fondo */
              margin-bottom: 20px; /* Margen inferior para darle espacio */
          }
          
          /* Estilo del título */
          .carousel-caption h3 {
              font-size: 2.5rem;
              font-weight: 600;
              text-shadow: 4px 4px 15px rgba(0, 0, 0, 0.7); /* Sombra para que el texto resalte */
              letter-spacing: 2px;
              margin-bottom: 20px;
              opacity: 1;
              color: white;
          }
          
          /* Estilo de los párrafos */
          .carousel-caption p {
              font-size: 1.2rem;
              line-height: 1.6;
              text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); /* Sombra más suave para el párrafo */
              opacity: 0.9;
              color: white;
              margin-bottom: 20px; /* Margen inferior para mejorar la visibilidad */
          }
          
          /* Enlaces resaltados (CATEGORÍAS y CONSEJOS) */
          .highlight-word {
              color: #FFD700; /* Color dorado para el enlace */
              font-weight: bold;
              transition: color 0.3s ease, transform 0.3s ease;
              text-decoration: none; /* Eliminamos el subrayado predeterminado */
          }
          
          .highlight-word:hover {
              color: #FF6347; /* Rojo cuando el usuario pasa el ratón */
              transform: scale(1.1); /* Efecto de zoom al pasar el ratón */
          }
          
          /* Agregar animaciones para el texto */
          .carousel-item.active .carousel-caption h3,
          .carousel-item.active .carousel-caption p {
              animation: fadeInUp 1s ease-out;
          }
          
          @keyframes fadeInUp {
              0% {
                  opacity: 0;
                  transform: translateY(20px);
              }
              100% {
                  opacity: 1;
                  transform: translateY(0);
              }
          }
          
          /* Flechas de navegación */
          #carouselExample .carousel-control-prev-icon, #carouselExample .carousel-control-next-icon {
            background-color: rgba(0, 0, 0, 0.5); /* Color más suave para las flechas */
            border-radius: 50%; /* Flechas redondeadas */
            padding: 10px; /* Un poco de espacio extra alrededor de las flechas */
          }
          
          /* Flechas de navegación al pasar el ratón */
          #carouselExample .carousel-control-prev-icon:hover, #carouselExample .carousel-control-next-icon:hover {
            background-color: rgba(0, 0, 0, 0.8); /* Cambiar el color de fondo en hover */
          }
          
          #carouselExample .carousel-item {
            position: relative;
          }
          
          #carouselExample .carousel-caption {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%); /* Centrado perfecto */
            color: white; /* Color del texto */
            background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro semi-transparente para legibilidad */
            padding: 30px 40px; /* Aumentar el padding para dar más espacio alrededor del texto */
            border-radius: 15px; /* Bordes redondeados para un toque más moderno */
            text-align: center;
            font-family: 'Roboto', sans-serif; /* Fuente más moderna */
            font-size: 1.2rem; /* Tamaño de fuente más grande */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4); /* Sombra sutil para dar profundidad */
            transition: all 0.3s ease; /* Transición suave para animaciones */
          }
          
          #carouselExample .carousel-item img {
            width: 100%; /* Asegura que la imagen ocupe todo el ancho */
            height: auto; /* Mantiene la relación de aspecto */
            border-radius: 10px; /* Bordes redondeados en las imágenes */
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* Sombra sutil en las imágenes */
            transition: transform 0.3s ease; /* Transición suave en el efecto hover */
          }
          
          /* Efecto hover en la imagen */
          #carouselExample .carousel-item img:hover {
            transform: scale(1.05); /* Efecto de zoom cuando se pasa el ratón sobre la imagen */
          }
          
          /* Transición en el texto */
          #carouselExample .carousel-caption:hover {
            background-color: rgba(0, 0, 0, 0.7); /* Cambiar fondo al pasar el ratón */
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5); /* Aumentar la sombra */
          }
          
          /* Mejorar la fuente del título (h3) */
          #carouselExample .carousel-caption h3 {
            font-family: 'Montserrat', sans-serif; /* Fuente moderna para títulos */
            font-size: 2rem; /* Tamaño de fuente más grande para los títulos */
            font-weight: 600; /* Hacer el título más negrita */
            margin-bottom: 15px; /* Espacio debajo del título */
          }
          
          /* Mejorar la fuente de la descripción (p) */
          #carouselExample .carousel-caption p {
            font-size: 1rem; /* Tamaño de fuente más pequeño para la descripción */
            font-weight: 400; /* Peso normal para la descripción */
            line-height: 1.6; /* Espaciado de línea más amplio */
          }
          
          /* Flechas de navegación */
          #carouselExample .carousel-control-prev-icon, #carouselExample .carousel-control-next-icon {
            background-color: rgba(0, 0, 0, 0.5); /* Color más suave para las flechas */
            border-radius: 50%; /* Flechas redondeadas */
            padding: 10px; /* Un poco de espacio extra alrededor de las flechas */
          }
          
          /* Flechas de navegación al pasar el ratón */
          #carouselExample .carousel-control-prev-icon:hover, #carouselExample .carousel-control-next-icon:hover {
            background-color: rgba(0, 0, 0, 0.8); /* Cambiar el color de fondo en hover */
          }
          
                 /* Estilos del menú */
          /* Ajustes para pantallas pequeñas */
          /* Estilos del menú */
          .carousel-item {
            position: relative; /* Esto es necesario para colocar la capa de texto sobre la imagen */
          }
          
          .carousel-caption {
            position: absolute;
            top: 50%; /* Centra el texto verticalmente */
            left: 50%;
            transform: translate(-50%, -50%); /* Centra el texto tanto vertical como horizontalmente */
            color: white; /* Color del texto */
            background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro semi-transparente para legibilidad */
            padding: 15px;
            border-radius: 5px; /* Opcional: bordes redondeados */
            text-align: center;
          }
          
          .carousel-item img {
            width: 100%; /* Asegura que la imagen ocupe todo el ancho */
            height: auto; /* Mantiene la relación de aspecto */
          }
          
          .carousel-control-prev-icon, .carousel-control-next-icon {
            background-color: black; /* Color de las flechas de navegación */
          }
          
          .caja2 h3{
              font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
              color: darkred;
              font-size: 25px
          }
          
          .caja3 h3{
              font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
              color: darkred;
              font-size: 25px
          }
          
          
          .down-arrow {
            position: absolute;
            bottom: 20px; /* Ajusta la distancia desde el borde inferior */
            left: 50%;
            transform: translateX(-50%); /* Centra la flecha horizontalmente */
            font-size: 40px; /* Tamaño de la flecha */
            color: rgba(248, 238, 238, 0.8); /* Color de la flecha */
            cursor: pointer; /* Hace que sea clickeable */
            transition: all 0.3s ease;
            text-decoration: none; /* Elimina subrayado en el enlace */
            animation: bounce 2s infinite;
          }
          
          .down-arrow:hover {
            color: #ffffff; /* Cambia el color al pasar el mouse */
            transform: translateX(-50%) scale(1.2); /* Aumenta el tamaño al pasar el mouse */
          }
          
          @keyframes bounce {
              0%, 100% {
                  transform: translateY(0);
              }
              50% {
                  transform: translateY(-10px);
              }
          }
          
          html {
            scroll-behavior: smooth;
          }
          .imagen{
              padding-right: 100px;
          }
          .carousel-item img {
                height: 560px; /* Ajusta esta altura según lo necesites */
                object-fit: cover; /* Asegura que la imagen se recorte si es necesario para llenar el contenedor */
                padding-top: 24px;
                box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.5); /* Sombra más fuerte y difusa */
                filter: drop-shadow(0px 10px 30px rgba(0, 0, 0, 0.7)); /* Sombra más fuerte */
          
              }
          
          
           .contenido-oculto2 li{
              font-size: 18px;
              color: rgb(19, 18, 18);
              font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
              margin-left: 90px;
          }
            a{
              list-style: none;
              
          }
          .carousel-container {
              position: relative;
              max-width: 80%;
              overflow: hidden;
          }
          
          /* Sombra izquierda */
          .shadow-left {
              position: absolute;
              top: 0;
              left: 0;
              width: 15%;
              height: 100%;
              background: linear-gradient(to right, rgba(0, 0, 0, 0.7), transparent);
          }
          
          /* Sombra derecha */
          .shadow-right {
              position: absolute;
              top: 0;
              right: 0;
              width: 15%;
              height: 100%;
              background: linear-gradient(to left, rgba(0, 0, 0, 0.7), transparent);
          }
          
          .imagen1 {
              position: relative;
              display: inline-block;
              width: 100%
          }
          
          .imagen1 img {
              width: 100%;
              display: block;
          }
          
          .imagen1::before {
              content: "";
              position: absolute;
              top: 27%;
              left: 0;
              width: 50%; /* Hasta la mitad de la imagen */
              height: 73%;
              background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
              pointer-events: none;
          }
          
          
          .top-bar {
              display: flex;
              justify-content: space-between;
              align-items: center;
              background-color: #fff;
              padding: 10px 20px;
              box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
              position: sticky;
              top: 0;
              z-index: 1000;
          }
          
          .menu {
              list-style: none;
              display: flex;
              gap: 20px;
              padding: 0;
              margin: 0;
          }
          
          .menu li {
              position: relative;
          }
          
          .menu a {
              text-decoration: none;
              color: #333;
              font-weight: bold;
              padding: 10px;
              transition: color 0.3s;
          }
          
          .menu a:hover {
              color: #d44747;
          }
          
          .submenu {
              display: none;
              position: absolute;
              background: #ffffff;
              list-style: none;
              padding: 10px;
              border-radius: 5px;
              top: 100%;
              left: 0;
              z-index: 10;
          }
          
          .menu li:hover .submenu {
              display: block;
          }
          
          /* Botón hamburguesa */
          .menu-toggle {
              display: none;
              font-size: 24px;
              background: none;
              border: none;
              cursor: pointer;
              z-index: 100;
          }
          
          
          
          .caja3 {
              background-color: white;
              padding: 20px;
              border-radius: 10px;
              box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
              position: relative;
              opacity: 0;
              animation: fadeIn 1s ease-out forwards, slideIn 1s ease-out forwards;
          }
          
          #toggle2 {
              display: none;
          }
          
          .toggle-label2 {
              background: #b90101;
              color: white;
              border-radius: 50%;
              width: 30px;
              height: 30px;
              display: flex;
              justify-content: center;
              align-items: center;
              cursor: pointer;
              font-size: 20px;
              font-weight: bold;
              transition: 0.3s;
          }
          
          #toggle2:checked + .toggle-label2 {
              transform: rotate(45deg);
              background: #ff0000;
          }
          
          .contenido-oculto2 {
              display: none;
              margin-top: 15px;
          }
          
          #toggle2:checked ~ .contenido-oculto2 {
              display: block;
          }
          
          .scroll-animation {
              opacity: 0;
              transform: translateY(20px);
              transition: opacity 1s ease-out, transform 1s ease-out;
          }
          
          .scroll-animation.visible {
              opacity: 1;
              transform: translateY(0);
          }
          
          @keyframes fadeIn {
              0% {
                  opacity: 0;
                  transform: translateY(20px);
              }
              100% {
                  opacity: 1;
                  transform: translateY(0);
              }
          }
          
          @keyframes slideIn {
              0% {
                  opacity: 0;
                  transform: translateX(-100%);
              }
              100% {
                  opacity: 1;
                  transform: translateX(0);
              }
          }
          
          .animated-box {
              opacity: 0;
              animation: fadeIn 1s ease-out forwards, slideIn 1s ease-out forwards;
          }
          
          .animated-box:nth-child(odd) {
              animation-delay: 0.5s;
          }
          
          .animated-box:nth-child(even) {
              animation-delay: 1s;
          }
          
          .animated-image img {
              animation: zoomIn 1s ease-out forwards;
          }
          
          @keyframes zoomIn {
              0% {
                  transform: scale(0.8);
                  opacity: 0;
              }
              100% {
                  transform: scale(1);
                  opacity: 1;
              }
          }
          
          @keyframes fadeInText {
              0% {
                  opacity: 0;
                  transform: translateY(10px);
              }
              100% {
                  opacity: 1;
                  transform: translateY(0);
              }
          }
          
          .animated-text {
              animation: fadeInText 1s ease-out forwards;
              margin-left: 10px; /* Reduced left margin */
          }
          
          .lista-emojis {
              list-style: none;
              padding: 0;
              font-size: 16px; /* Unified font size */
          }
          
          .lista-emojis li {
              position: relative;
              padding-left: 35px;
              margin-bottom: 15px;
              animation: fadeInText 1s ease-out forwards; /* Add animation to list items */
          }
          
          .lista-emojis li::before {
              content: '✔'; /* You can replace this with any icon or emoji */
              position: absolute;
              left: 0;
              color: darkred;
              font-size: 18px;
          }
          /* Ajustes generales */
          html, body {
              overflow-x: hidden;
          }
          
          /* Ajustes para el footer en móviles */
          @media screen and (max-width: 767px) {
              footer {
                  padding: 20px;
                  text-align: center;
              }
              
              footer ul {
                  margin-left: 0;
                  padding: 0;
              }
              
              .footer-contact p {
                  margin-left: 0;
                  text-align: center;
              }
              
              .social-icons {
                  justify-content: center;
                  margin: 20px 0;
              }
          }
          
          /* Ajustes de navegación responsive */
          @media screen and (max-width: 767px) {
              .barra-navegacion {
                  position: fixed;
                  top: 0;
                  left: -100%;
                  width: 80%;
                  height: 100vh;
                  background: white;
                  transition: 0.3s;
                  z-index: 1000;
                  overflow-y: auto;
                  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
              }
              
              .barra-navegacion.active {
                  left: 0;
              }
              
              .menu {
                  flex-direction: column;
                  padding: 80px 20px 20px;
              }
              
              .menu li {
                  width: 100%;
                  margin: 10px 0;
              }
              
              .menu-toggle {
                  display: block;
                  position: fixed;
                  right: 20px;
                  top: 20px;
                  z-index: 1001;
              }
          }
          
          /* Ajustes para tablets */
          @media screen and (min-width: 768px) and (max-width: 1023px) {
              .intro-content {
                  flex-direction: row;
                  padding: 20px;
              }
              
              .intro-content img {
                  width: 45%;
              }
              
              .intro-content p {
                  width: 50%;
              }
              
              .carousel-caption {
                  width: 80%;
              }
          }
          
          /* Ajustes para pantallas grandes */
          @media screen and (min-width: 1367px) {
              .intro-content {
                  max-width: 1200px;
                  margin: 0 auto;
              }
          }
/* Estilo del contenido (texto) */
.contenido {
width: 80%;                  /* Controlamos el tamaño del texto */
padding: 10px;               /* Espaciado interno */
}

.contenido h2 {
font-size: 1.8em;            /* Título grande */
color: #333;                 /* Color del título */
}

.contenido p {
font-size: 1.2em;            /* Tamaño de texto cómodo para lectura */
line-height: 1.6;            /* Espaciado entre líneas */
color: #666;                 /* Color del texto */
}

/* Estilo de la imagen */
.tipo-impresora1 {
display: flex;

align-items: center;
justify-content: space-between;
gap: 20px;
}

.contenido {
width: 80%;
padding: 10px;
}

.imagen {
width: 17%;
margin-right: 20px;
}

.imagen img {
width: 100%;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Responsividad: Pantallas móviles */

.caja2 h3 {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    color: darkred;
    font-size: 25px;
}
.caja1, .caja2, .caja3 {
    border-radius: 5px;
    border: solid 1px rgb(255, 255, 255);
    width: 87%;
    margin: 50px auto;
    padding: 15px;
    background-color: rgb(245, 245, 245);

}  

.contenido p{
font-size: 16px;
color: rgb(19, 18, 18);
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
margin-left: 10px;
}

.contenido li{
font-size: 18px;
color: rgb(19, 18, 18);
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.texto p{
font-size: 15px;
color: rgb(19, 18, 18);
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
margin-left: 12px;
margin-right: 10px;
}

h1{
color: rgb(160, 4, 4);
font-size: 32px;
text-align: center;
padding-top:10px;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
/* Estilos Generales para el Menú */
/* Estilo básico del menú */
/*.barra-navegacion {
border-style: solid;
font-family: Arial, sans-serif;

}

/* Estilos Generales para el Menú */
.menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}


/* Estilo para los elementos del menú */
.menu > li {
position: relative; /* Necesario para los submenús */
padding: 5px 10px;
color: white;
}

/* Enlaces del menú principal */
.menu > li > a {
text-decoration: none;
color: #000000; /* Color blanco para los enlaces */
font-size: 18px;
padding: 5px;
display: block;
}

/* Estilo de la flechita solo para el li que tiene submenú */
.menu > li > a:after {
content: " ▼"; /* Carácter para la flechita hacia abajo */
font-size: 12px;
margin-left: 10px; /* Espacio entre el texto y la flecha */
display: inline-block; /* Asegura que la flecha esté junto al texto */
}

/* Ocultamos la flecha en los elementos que no tienen submenú */
.menu > li > a {
position: relative;
}

.menu > li > ul.submenu {
display: none; /* Submenú oculto por defecto */
}

/* Mostramos la flecha solo si el li tiene un submenú */
.menu > li > ul.submenu:only-child {
display: block; /* Muestra el submenú cuando es único en su li */
}

/* Estilo para el submenú */
.submenu {
    display: none;
    position: absolute;
    background: #ffffff;
    list-style: none;
    padding: 10px;
    border-radius: 5px;
    top: 100%;
    left: 0;
    z-index: 100;
}
/* Estilo para los elementos dentro del submenú */
.submenu li {
padding: 4px 10px;
text-align: center;
}

/* Estilo para los enlaces dentro del submenú */
.submenu li a {
color: #b9b3b3; /* Color oscuro para los enlaces del submenú */
font-size: 16px;
padding: 4px 10px;
display: block;
transition: background-color 0.3s ease; /* Transición suave */
}

/* Efecto hover en los enlaces del submenú */
.submenu li a:hover {
background-color: #d44747; /* Fondo gris claro al pasar el mouse */
color:white;
}

/* Mostrar el submenú al pasar el mouse sobre el elemento principal */
.menu > li:hover .submenu {
display: block;
}
.contenido {
width: 80%;
padding: 10px;
}

.contenido h2 {
font-size: 1.8em;
color: #333;
}

.contenido p {
font-size: 1.2em;
line-height: 1.6;
color: #666;
}

/* Estilo de la imagen */
.imagen {
width: 17%;
margin-right: 50px;
}

.imagen img {
width: 100%;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Responsividad: Cuando la pantalla es más pequeña, hacemos que las columnas se apilen */



header {
    background-color: white;
    z-index: 10;
    position: fixed;
    top: 0;
    width: 100vw;
}

/* Contenedor del menú superior */
.top-bar {
    display: flex; /* Distribución en línea */
    align-items: center; /* Centrado vertical */
    gap: 15px; /* Separación entre los elementos */
    flex-wrap: wrap;
    padding: 10px;
    justify-content: center;


}
.bar{
    background-color: #4a4a4a; /* Color de fondo */
    color: white; /* Color del texto */
    padding: 10px 20px;
    display: flex; /* Distribución en línea */
    align-items: center; /* Centrado vertical */
    justify-content: space-around; /* se centra*/
    width: 100%;
}

.conclusion{
    padding-left: 50px;
    padding-right: 50px;
    text-align: justify;
    background-color: rgb(255, 255, 255);
}
.color1{
    background-color: rgb(255, 255, 255);
    box-sizing: border-box;
    border-style: solid;
    border-color:  rgb(255, 255, 255);
    border-radius: 5px;
    width: 95%;
    margin: 10px auto;



}

.top-bar2 {
    display: flex; /* Distribución en línea */
    justify-content: end;
    align-items: center; /* Centrado vertical */
    gap: 30px; /* Separación entre los elementos */
    flex-wrap: wrap;

}





/* Estilos de cada opción del menú */
.menu-item {
    display: flex;
    align-items: center; /* Centrado vertical */
    gap: 5px; /* Separación entre el ícono y el texto */
    padding: 5px 10px; /* Espacio alrededor de cada ítem */
    border-radius: 5px; /* Bordes redondeados */
    transition: background-color 0.3s ease; /* Transición suave */
}

.menu-item a {
    text-decoration: none; /* Quita subrayado */
    color: white; /* Color del texto */
    font-size: 14px;
}

/* Cambio de color al pasar el ratón */
.menu-item:hover {
    background-color: #d3c4c4; /* Color de fondo más claro */
}
.submenu {
    display: none;
}


/* Estilos del ícono */
.icon {
    font-size: 18px; /* Tamaño del ícono */
}

/* Estilos para el contenido principal */
.main-content {
    padding: 20px;
}

.bara {
    display: flex;
    justify-content: space-between;
    position: -webkit-sticky;
    position: sticky;
    padding: 10px 30px;
    background-color: white;
    opacity: 0.95;
    flex-wrap: wrap;
    position: fixed; /* La barra será fija */
    top: 0; /* Se pega arriba */
    left: 0;
    right: 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Añade sombra para destacarla */
    z-index: 1000; /* Coloca 'bara' debajo de la 'top-bar' */

}


/* Contenedor de la barra de búsqueda */
.search-bar {
    padding-left: 20px;
    flex-grow: 1; /* Ocupa el máximo espacio disponible */
    margin-left: 20px; /* Espaciado desde el logo */
    display: flex;
    padding-top: 1px;

}



/* Estilo de la imagen de la lupa */
.search-icon {
    width: 20px; /* Ajusta el tamaño según lo necesites */
    height: 20px;
}


.cajaintro {
    border-radius: 5px;
    border: solid 2px rgb(0, 0, 0);
    width: 65%;
    margin: 10px auto;
    background-color: #fffde6;
}

.cajaintro p{
    padding-left:3px;
    padding-right: 3px;
    margin-left: 40px;
    margin-right: 40px;
    margin-top: 20px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 18px;
}
/* Estilo del formulario de búsqueda */
.search-form {
    display: flex; 
}

.search-input {
    width:300px;
    height: 30px;
    display: flex;
}

.search-button{
    margin-left: 10px;
    height: 31px;
}

.menu-toggle {
    display: none;
    font-size: 24px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1001;
}

article {
    margin: 10px auto;
}

.caja1 p{
    padding-left: 90px;
    padding-right: 90px;
    align-items: center;
    
}
.caja1, .caja2, .caja3 {
    border-radius: 5px;
    border: solid 1px rgb(252, 243, 231);
    width: 87%;
    margin: 50px auto;
    padding: 15px;
    background-color: rgb(252, 252, 252);

}  


.barra-navegacion {
    background-color: #f3f3f3; /* Color de fondo claro */
    padding: 12px 0; /* Espaciado vertical */
    text-align: center; /* Centra el contenido */
}

/* Estilo del menú */
.menu {
    list-style: none; /* Elimina puntos de lista */
    margin: 0;
    padding: 0;
    display: inline-block; /* Mantiene la lista en línea */
}

.menu li {
    display: inline; /* Hace los elementos en línea */
    margin: 0 20px; /* Espaciado horizontal entre elementos */
}


/* Estilo de los enlaces */




p{
    padding-left: 70px;
    padding-right: 70px;
    margin-left: 50px;
    margin-right: 50px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 18px;
    
}

.imageninicio{
    text-align: center;
}


.tituloconclusion{

        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        color: darkred;
        font-size: 20px;
        padding-left: 160px;
        background-color: rgb(255, 255, 255);
    
}

.historia{
    margin-left: 60px;
}


.lista-emojis3 {
    list-style: none; /* Quita las viñetas predeterminadas */
    padding-left: 70px;
    padding-right: 70px;
    margin-left: 50px;
    margin-right: 50px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: x;

}



.lista-emojis {
    list-style: none; /* Quita las viñetas predeterminadas */
    padding-left: 70px;
    padding-right: 70px;
   
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    margin: 50px;
    margin-top: 0px;

}

.bara a img:hover {
    filter: brightness(1.3);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
    transition: 0.3s ease-in-out;
}
.tipo-impresora {
display: flex;               /* Usamos flexbox para una distribución en 2 columnas */
margin: 30px 0;              /* Espaciado entre cada sección */
align-items: center;         /* Centrado vertical */
justify-content: space-between; /* Espacio entre texto e imagen */
}

/* Estilo del contenido (texto) */
.contenido {
width: 75%;                  /* Controlamos el tamaño del texto */
padding: 10px;               /* Espaciado interno */
}

.contenido h2 {
font-size: 1.8em;            /* Título grande */
color: #333;                 /* Color del título */
}

.contenido p {
font-size: 1.2em;            /* Tamaño de texto cómodo para lectura */
line-height: 1.6;            /* Espaciado entre líneas */
color: #666;                 /* Color del texto */
}

/* Estilo de la imagen */
.imagen {
width: 35%;                  /* Controlamos el tamaño de la imagen */
margin-right: 50px;
}

.imagen img {
width: 100%;                 /* Hacemos que la imagen ocupe todo el espacio disponible */
border-radius: 10px;         /* Bordes redondeados */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave para darle profundidad */
}

/* Responsividad: Cuando la pantalla es más pequeña, hacemos que las columnas se apilen */



.contenido p{
font-size: 16px;
color: rgb(19, 18, 18);
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
margin-left: 10px;
}

.contenido li{
font-size: 18px;
color: rgb(19, 18, 18);
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.texto p{
font-size: 15px;
color: rgb(19, 18, 18);
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
margin-left: 12px;
margin-right: 10px;
}

h1{
color: rgb(160, 4, 4);
font-size: 32px;
text-align: center;
padding-top:130px;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;


}

.tituloimpresora{
        color: rgb(160, 4, 4);
        font-size: 32px;
        text-align: center;
        padding-top:140px;
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
/* Estilos Generales para el Menú */
/* Estilo básico del menú */
.barra-navegacion {
font-family: Arial, sans-serif;
background-color: #ffffff;

}

/* Estilos Generales para el Menú */
.menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
background-color: #ffffff; /* Fondo oscuro para la barra */
}

/* Estilo para los elementos del menú */
.menu > li {
position: relative; /* Necesario para los submenús */
padding: 5px 10px;
color: white;
}

/* Enlaces del menú principal */
.menu > li > a {
text-decoration: none;
color: #000000; /* Color blanco para los enlaces */
font-size: 18px;
padding: 5px;
display: block;
}
.tienda a{
    color: black;
}
.tituloindex{
    padding-top: 10px;
    color: rgb(160, 4, 4)
}
/* Estilo de la flechita solo para el li que tiene submenú */
.menu > li > a:after {
content: " ▼"; /* Carácter para la flechita hacia abajo */
font-size: 12px;
margin-left: 10px; /* Espacio entre el texto y la flecha */
display: inline-block; /* Asegura que la flecha esté junto al texto */
}

/* Ocultamos la flecha en los elementos que no tienen submenú */
.menu > li > a {
position: relative;
}

.menu > li > ul.submenu {
display: none; /* Submenú oculto por defecto */
}

/* Mostramos la flecha solo si el li tiene un submenú */
.menu > li > ul.submenu:only-child {
display: block; /* Muestra el submenú cuando es único en su li */
}


/* Estilo para los elementos dentro del submenú */
.submenu li {
padding: 4px 10px;
text-align: center;
}

/* Estilo para los enlaces dentro del submenú */
.submenu li a {
color: rgb(170, 4, 4); /* Color oscuro para los enlaces del submenú */
font-size: 16px;
padding: 4px 10px;
display: block;
text-decoration: none;
transition: background-color 0.3s ease; /* Transición suave */
}

/* Efecto hover en los enlaces del submenú */
.submenu li a:hover {
background-color: #d44747; /* Fondo gris claro al pasar el mouse */
color:white;
}

/* Mostrar el submenú al pasar el mouse sobre el elemento principal */
.menu > li:hover .submenu {
display: block;
}

.usotitle{
    padding-top: 140px;
}

.usoul{
    margin-left:70px;
}
.historia h1{
    color: rgb(160, 4, 4);
    font-size: 32px;
    padding-top: 220px;
    text-align: center;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.tipo-impresora {
    display: flex;               /* Usamos flexbox para una distribución en 2 columnas */
    margin: 30px 0;              /* Espaciado entre cada sección */
    align-items: center;         /* Centrado vertical */
    justify-content: space-between; /* Espacio entre texto e imagen */
}

/* Estilo del contenido (texto) */
.contenidoHistoria {
    width: 70%;                  /* Controlamos el tamaño del texto */
    padding: 10px;               /* Espaciado interno */
}


/* Estilo de la imagen */
.imagen {
    width: 25%;                  /* Controlamos el tamaño de la imagen */
    margin-right: 120px;
}

.imagen img {
    width: 100%;                 /* Hacemos que la imagen ocupe todo el espacio disponible */
    border-radius: 10px;         /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave para darle profundidad */
}

/* Responsividad: Cuando la pantalla es más pequeña, hacemos que las columnas se apilen */

.contenidoHistoria h2{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 30px;
    margin-left: 80px;
    color:darkred;
}
.contenidoHistoria p{
    font-size: 16px;
    color: rgb(19, 18, 18);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    margin-left: 40px;
    padding-right: 60px;
}

.contencontenidoHistoriaido li{
    font-size: 16px;
    color: rgb(19, 18, 18);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.contenidoHistoria h3{
    margin-left: 20px;
}
.futuro{
    color: rgb(160, 4, 4);
    font-size: 32px;


    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}


.contenidoFuturo p{
    font-size: 16px;
    color: rgb(19, 18, 18);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

   
}



/* Estilo del contenido (texto) */
.contenidoFuturo {
               /* Espaciado interno */
    padding-left:60px ;
    padding-right: 60px;
}



.contenidoFuturo h3{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 20px;
    margin-left: 10px;
    color:darkred;
    padding-left: 10px;
    padding-left:60px ;
    padding-right: 60px;
}


.contenidoFuturo h3{
    margin-left: 20px;
    padding-left:60px ;
    padding-right: 60px;
}
blockquote {
    background-color: #fff1f1;
    border-left: 5px solid #d3332e;
    margin: 20px 0;
    padding: 10px 20px;
    font-style: italic;
    color: #852828;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    margin-left: 150px;
    margin-right: 120px;
   
}





.contenidoMantenimiento h1{
    color: rgb(160, 4, 4);
    font-size: 32px;
    padding-top: 220px;
    text-align: center;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
.contenidoMantenimiento p{
    padding-left: 70px;
    padding-right: 70px;
    margin-left: 50px;
    margin-right: 50px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.contenidoMantenimiento h4{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: darkred;
    font-size: 20px;
    padding-left: 70px;
    padding-right: 70px;
    margin-left: 50px;
    margin-right: 50px;
}

.articleMantenimiento p{
    padding-left: 70px;
    padding-right: 70px;
    margin-left: 50px;
    margin-right: 50px;
}
.contenidoMantenimiento {
    width: 75%;                  /* Controlamos el tamaño del texto */
    padding: 10px;               /* Espaciado interno */
}

.tipo-impresoraMantenimiento {
    display: flex;               /* Usamos flexbox para una distribución en 2 columnas */
    margin: 30px 0;              /* Espaciado entre cada sección */
    align-items: center;         /* Centrado vertical */
    justify-content: space-between; /* Espacio entre texto e imagen */
}
.imagenMantenimiento {
    width: 23%;                  /* Controlamos el tamaño de la imagen */
    margin-right: 50px;
}

.imagenMantenimiento img {
    width: 100%;                 /* Hacemos que la imagen ocupe todo el espacio disponible */
    border-radius: 10px;         /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave para darle profundidad */
}

@media screen and (max-width: 768px) {
    .caja2 {
      flex-direction: column; /* Ahora se pone en columna solo en móvil */
    }
  
    .caja2 img {
      order: 1;
      align-self: flex-start;
      margin: 1rem 0 0 0; /* Espaciado de la imagen solo en móvil */
    }
  }

/* Responsividad: Cuando la pantalla es más pequeña, hacemos que las columnas se apilen */
@media (max-width: 768px) {
    .tipo-impresoraMantenimiento {
        flex-direction: column;  /* Cambiamos a disposición vertical */
        align-items: center;     /* Centrar todo en pantallas pequeñas */
    }

    .contenidoMantenimiento, .imagenMantenimiento {
        width: 100%;              /* Hacemos que el texto y la imagen ocupen todo el ancho */
        margin-bottom: 20px;      /* Separación entre el texto y la imagen */
    }
}

@media screen and (max-width: 768px) {
    .menu {
        display: none;
        flex-direction: column;
        background: white;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    .menu.active {
        display: flex;
    }
    
    .menu-toggle {
        display: block;
        font-size: 30px;
        cursor: pointer;
        padding: 10px;
    }

    .menu li {
        text-align: center;
    }

    .submenu {
        position: static;
        background: #f9f9f9;
        padding: 5px 0;
    }

    .menu li:hover .submenu {
        display: none;
    }
}

.social-container {
    margin-top: 20px;
    text-align: center;
}

.social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    list-style: none;
    padding: 0;
}

.social-icons a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-decoration: none;
    color: white;
    font-size: 20px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.facebook { background: #3b5998; }
.twitter { background: #1da1f2; }
.instagram { background: #e4405f; }
.linkedin { background: #0077b5; }

.social-icons a:hover {
    transform: scale(1.1);
    opacity: 0.8;
}

.footer-contact a:hover {
    color: red;
}

.footer-section .footer-logo {
    text-decoration: none;
    color: white;
}

.footer-section a {
    text-decoration: none;
    color: white;
}

.footer-section a:hover {
    color: red;
}

footer {
    background-color: #2A2A2A;
    color: white;


    justify-content: space-around;
    flex-wrap: wrap;
    text-align: center;
}

.footer-section {
    flex: 1;
    min-width: 300px;
}

.footer-logo img {
    margin-bottom: 10px;
}

.footer-logo h2 {
    font-style: italic;
    font-weight: bold;
}

.footer-links h3,
.footer-contact h3 {
    margin-bottom: 15px;
    text-transform: uppercase;
    border-bottom: 2px solid red;
    display: inline-block;
    padding-bottom: 5px;
}

.footer-links ul {
    list-style: none;
    padding: 0;
    margin-top: 10px;
}

.footer-links ul li {
    margin-bottom: 8px;
}

.footer-links ul li a {
    color: white;
    text-decoration: none;
    font-size: 14px;
}

.footer-links ul li a:hover {
    color: red;
}

.footer-contact p {
    margin-bottom: 8px;
    font-size: 14px;
}

.footer-bottom {
    background-color: #1a1a1a;
    color: white;
    text-align: center;
    padding: 15px;
    font-size: 12px;
    width: 100%;
}


@keyframes fadeInOut {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

.imagenConsejos {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}

.imagenConsejos img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    animation: fadeInOut 6s infinite;
}

.imagenConsejos img:nth-child(1) {
    animation-delay: 0s;
}

.imagenConsejos img:nth-child(2) {
    animation-delay: 3s;
}