.contenedor-mecanica-de-motos {
    /* background-color: red; */
    width: 100%;
    min-height: 100vh;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* grid-template-rows: auto repeat(4, 500px); */
    grid-template-rows: repeat(5, auto);
}

.caja-mecanica-1 {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 20px;
    /* background-color: #d6e6ff; */
}

.texto-mecanica-de-motos {
    width: 50%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    padding: 10px;
    gap: 10px;
    /* background-color: aqua; */
}

.texto-mecanica-de-motos h1 {
    position: relative;
    /* Para posicionar el ::after relativo a este elemento */
    display: inline-block;
    /* Para que el ancho se ajuste al contenido */
    font-size: 2rem;
    /* Tamaño de fuente legible y destacado */
    font-weight: bold;
    /* Negrita para énfasis */
    color: #2e2e2e;
    /* Color de texto principal */
    margin: 0 auto;
    /* Elimina margen por defecto */
    padding-bottom: 10px;
    /* Espacio para la línea decorativa debajo */
    cursor: default;
    /* Cursor normal (sin indicar enlace) */
}

.texto-mecanica-de-motos p {
    width: 60%;
    padding: 10px;
    overflow-wrap: break-word;
    /* background-color: blue; */
    font-size: 22px;
    margin: 0 auto;
    line-height: 32px;
}

.video-mecanica-de-motos {
    width: 40%;

    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border-radius: 12px;
}

.video-mecanica-de-motos iframe {
    /* width: 100%;
    height: 400px;
    border: 10px solid red; */



    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    border: none;
    display: block;
    object-fit: cover;
    border-radius: 12px;
}

.caja-mecanica-2 {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 20px;
    /* background-color: #d7f9f8; */
}

.caja-mecanica-3 {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 20px;
    /* background-color: #ffffea; */
}

.caja-mecanica-4 {
    grid-column: 1 / 3;
    grid-row: 4 / 5;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 20px;
    /* background-color: #fbe0e0; */
}

.caja-ubicacion {
    grid-column: 1 / 3;
    grid-row: 5 / 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 40px;
    margin-top: 50px;
}

.caja-ubicacion h2 {
    font-size: 2rem;
    color: #b30000;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 3px solid #ff4d4d;
    padding-bottom: 10px;
}

/* ====== Contenedor del mapa ====== */
.mapa-ubicacion {
    width: 100%;
    max-width: 800px;
    /* Limita el ancho para no hacerlo gigante */
    border-radius: 10px;
    overflow: hidden;
    /* Oculta bordes del iframe */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

/* ====== El mapa (iframe) ====== */
.mapa-ubicacion iframe {
    width: 100%;
    /* Ocupa todo el ancho disponible */
    height: 400px;
    /* Altura fija */
    border: none;
    /* Quita el borde */
    border-radius: 10px;
}

/****************************************************************************
*****************************************************************************

El pseudo-elemento ::after crea la línea decorativa bajo el título.

Las transiciones controlan la velocidad y suavidad del crecimiento/encogimiento y el cambio de color.

La animación colorShift hace que la línea cambie entre naranja y amarillo de forma suave, activándose solo al pasar el cursor sobre .caja-mecanica-1.

Los comentarios explican cada propiedad y su propósito, ayudando a futuras modificaciones o entendimiento rápido.

*****************************************************************************
*****************************************************************************/

/* Pseudo-elemento ::after para crear la línea decorativa debajo del título */
.texto-mecanica-de-motos h1::after {
    content: "";
    /* Contenido vacío para crear la línea */
    position: absolute;
    /* Posiciona relativo al h1 */
    left: 0;
    /* Alineado a la izquierda */
    bottom: 0;
    /* Pegado en la parte inferior del h1 */
    width: 0;
    /* Inicialmente línea con ancho 0 (invisible) */
    height: 3px;
    /* Grosor de la línea */
    background-color: red;
    /* Color inicial de la línea */
    border-radius: 2px;
    /* Bordes redondeados para suavidad */
    opacity: 0.8;
    /* Opacidad para un ligero efecto transparente */

    /* Transiciones para suavizar cambios de ancho, color y opacidad */
    transition:
        width 0.3s ease-out,
        /* Transición rápida y suave al aumentar ancho */
        background-color 0.6s ease,
        /* Transición más lenta para cambio de color */
        opacity 0.3s ease-out;
    /* Transición rápida para opacidad */

    /* Animación para alternar el color de la línea (naranja a amarillo) */
    animation: colorShift 2s infinite alternate;
    animation-play-state: paused;
    /* Animación pausada por defecto (no hover) */
}

/* Estado hover en .caja-mecanica-1 para afectar el título dentro */
.caja-mecanica-1:hover .texto-mecanica-de-motos h1::after,
.caja-mecanica-2:hover .texto-mecanica-de-motos h1::after,
.caja-mecanica-3:hover .texto-mecanica-de-motos h1::after,
.caja-mecanica-4:hover .texto-mecanica-de-motos h1::after {
    width: 100%;
    /* Expande la línea a 40px de ancho */
    background-color: red;
    /* Mantiene color rojo intenso */
    opacity: 1;
    /* Opacidad completa para mayor visibilidad */

    /* Transiciones para la salida del hover */
    transition:
        width 0.6s ease-in,
        /* Transición más lenta y suave para retraer línea */
        background-color 0.6s ease,
        /* Mismo tiempo para cambio de color */
        opacity 0.6s ease-in;
    /* Transición suave para opacidad */

    animation-play-state: running;
    /* Activa la animación de cambio de color */
}

/* Estado sin hover para aplicar un cambio de color y opacidad cuando la línea se retrae */
.caja-mecanica-1:not(:hover) .texto-mecanica-de-motos h1::after,
.caja-mecanica-2:not(:hover) .texto-mecanica-de-motos h1::after,
.caja-mecanica-3:not(:hover) .texto-mecanica-de-motos h1::after,
.caja-mecanica-4:not(:hover) .texto-mecanica-de-motos h1::after {
    background-color: orange;
    /* Cambia el color a naranja cuando no está activo */
    opacity: 0.6;
    /* Reduce opacidad para un efecto más sutil */
}

/* Definición de la animación para alternar suavemente entre naranja y amarillo */
@keyframes colorShift {
    0% {
        background-color: orange;
        /* Color inicial naranja */
    }

    100% {
        background-color: yellow;
        /* Color final amarillo */
    }
}










/* ===========================================================
   🎯 NUEVO RESPONSIVE PROFESIONAL - MECÁNICA DE MOTOS
   =========================================================== */

/* === 📱 Móviles pequeños (hasta 480px) === */
@media (max-width: 480px) {
    .contenedor-mecanica-de-motos {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 92%;
        margin: 0 auto;
        gap: 1.8rem;
        padding: 1.5rem 0;
    }

    .caja-mecanica-1,
    .caja-mecanica-2,
    .caja-mecanica-3,
    .caja-mecanica-4 {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem 1rem;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    }

    .texto-mecanica-de-motos {
        width: 100%;
    }

    .texto-mecanica-de-motos h1 {
        font-size: 1.4rem;
        letter-spacing: 0.5px;
        color: #222;
        margin-bottom: 0.8rem;
    }

    .texto-mecanica-de-motos p {
        width: 100%;
        font-size: 1rem;
        line-height: 1.7;
        text-align: justify;
        color: #333;
    }

    .video-mecanica-de-motos iframe {
        width: 100%;
        aspect-ratio: 16 / 9;
        border: none;
        border-radius: 10px;
    }

    .caja-ubicacion {
        margin-top: 2rem;
        padding: 1.5rem 1rem;
    }

    .mapa-ubicacion iframe {
        width: 100%;
        aspect-ratio: 16 / 9;
        border-radius: 10px;
    }
}

/* === 📱 Móviles medianos (481px a 768px) === */
@media (min-width: 481px) and (max-width: 768px) {
    .contenedor-mecanica-de-motos {
        width: 90%;
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .caja-mecanica-1,
    .caja-mecanica-2,
    .caja-mecanica-3,
    .caja-mecanica-4 {
        flex-direction: column;
        align-items: center;
        text-align: center;
        background: #fff;
        border-radius: 16px;
        padding: 2rem 1.5rem;
        box-shadow: 0 5px 16px rgba(0, 0, 0, 0.1);
    }

    .texto-mecanica-de-motos h1 {
        font-size: 1.8rem;
        color: #222;
        margin-bottom: 0.8rem;
    }

    .texto-mecanica-de-motos p {
        width: 90%;
        font-size: 1.05rem;
        line-height: 1.8;
        text-align: justify;
    }

    .video-mecanica-de-motos iframe {
        width: 100%;
        aspect-ratio: 16 / 9;
        border-radius: 12px;
    }

    .mapa-ubicacion iframe {
        height: auto;
        aspect-ratio: 16 / 9;
        border-radius: 12px;
    }
}

/* === 💻 Tablets (769px a 1024px) === */
@media (min-width: 769px) and (max-width: 1024px) {
    .contenedor-mecanica-de-motos {
        width: 90%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        align-items: center;
    }

    .texto-mecanica-de-motos h1 {
        font-size: 2rem;
        color: #1f1f1f;
    }

    .texto-mecanica-de-motos p {
        width: 90%;
        font-size: 1.1rem;
        line-height: 1.9;
        text-align: justify;
    }

    .video-mecanica-de-motos iframe {
        height: 340px;
        border-radius: 12px;
    }

    .mapa-ubicacion iframe {
        height: 350px;
    }
}

/* === 🖥️ Laptops medianas (1025px a 1399px) === */
@media (min-width: 1025px) and (max-width: 1399px) {
    .contenedor-mecanica-de-motos {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
        width: 85%;
    }

    .texto-mecanica-de-motos h1 {
        font-size: 2.2rem;
        color: #222;
        letter-spacing: 0.5px;
    }

    .texto-mecanica-de-motos p {
        width: 85%;
        font-size: 1.1rem;
        line-height: 1.9;
    }

    .video-mecanica-de-motos iframe {
        height: 420px;
        border-radius: 15px;
    }

    .mapa-ubicacion iframe {
        height: 420px;
        border-radius: 15px;
    }
}

/* === 🖥️ Pantallas grandes (1400px o más) === */
@media (min-width: 1400px) {
    .contenedor-mecanica-de-motos {
        max-width: 1400px;
        margin: 0 auto;
        gap: 3rem;
    }

    .texto-mecanica-de-motos h1 {
        font-size: 2.5rem;
    }

    .texto-mecanica-de-motos p {
        width: 75%;
        font-size: 1.2rem;
        line-height: 2;
    }

    .video-mecanica-de-motos iframe {
        height: 480px;
    }
}