/* ==========================================================================
   Hero Section (Inicio)
   ========================================================================== */
.hero {
    position: relative;
    width: 100%;
    height: var(--hero-height);
    background-image: url('../impresoras/Ricoh.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    animation: mini-zoom 20s ease-in-out infinite;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: var(--white);
    padding: 20px;
    animation: fadeInUp 1s ease-out;
}

.hero-content h1 {
    font-size: clamp(32px, 8vw, 48px);
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-content h2 {
    font-size: clamp(20px, 5vw, 32px);
    font-weight: 600;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-content h3 {
    font-size: clamp(24px, 6vw, 40px);
    font-weight: 700;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Media Query for Mobile (max-width: 768px) */
@media (max-width: 768px) {
    .hero {
        height: auto;
        min-height: var(--hero-mobile-height);
        padding: 48px 0;
        background-position: center;
        margin-top: var(--navbar-height);
    }

    .hero-content {
        max-width: 92%;
        margin: 0 auto;
        padding: 24px 16px;
    }

    .hero-content h1 {
        font-size: clamp(24px, 9vw, 32px);
        line-height: 1.3;
        margin-bottom: 16px;
        letter-spacing: 1px;
    }

    .hero-content h2 {
        font-size: clamp(16px, 6vw, 22px);
        line-height: 1.4;
        margin-bottom: 14px;
        letter-spacing: 0.5px;
    }

    .hero-content h3 {
        font-size: clamp(18px, 7vw, 26px);
        line-height: 1.4;
        letter-spacing: 0.5px;
    }
}

/* ==========================================================================
   Hero Alquiler
   ========================================================================== */
.hero-alquiler {
    padding-top: 70px; /* Espacio para la navbar fija */
}

.hero-alquiler .hero-image {
    background-image: url('../impresoras/Ricoh.jpg');
    height: 20vh;
    width: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ==========================================================================
   Hero Soporte
   ========================================================================== */
.hero-soporte {
    padding-top: 80px; /* Espacio para la navbar fija */
}

.hero-soporte .hero-image {
    background-image: url('../impresoras/soporte.jpg');
    height: 15vh;
    width: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Media Query for Mobile (max-width: 768px) */
@media (max-width: 768px) {
    .hero-alquiler,
    .hero-soporte {
        padding-top: 60px;
    }

    .hero-alquiler .hero-image,
    .hero-soporte .hero-image {
        height: 30vh;
        min-height: 200px;
        background-position: center;
    }
}

@media (max-width: 480px) {
    .hero-alquiler .hero-image,
    .hero-soporte .hero-image {
        height: 35vh;
        min-height: 180px;
    }
}

/* ==========================================================================
   Título de hero secundario (Alquiler / Soporte) — tipografía fluida
   ========================================================================== */
.hero-alquiler .hero-image h1,
.hero-soporte .hero-image h1 {
    color: var(--white);
    font-size: clamp(28px, 3.6vw, 48px);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    margin: 0;
    padding: 0 24px;
    max-width: 90%;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
}

@media (max-width: 768px) {
    .hero-alquiler .hero-image h1,
    .hero-soporte .hero-image h1 {
        font-size: clamp(22px, 7vw, 32px);
        line-height: 1.3;
        letter-spacing: 1px;
        padding: 0 16px;
    }
}