/* ==================================================
   HOME MAPA OSGRAP PRO
================================================== */

.home-mapa {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background: #0f0f10;
    color: #fff;
    position: relative;
    overflow: hidden;
}

/* =========================
   CONTENEDOR
========================= */
.mapa-container {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    align-items: stretch;
}

/* =========================
   INFO (LADO IZQUIERDO)
========================= */
.mapa-info {
    padding: 90px 8%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 2;
}

/* TÍTULO OSGRAP */
.mapa-info h2 {
    font-size: 34px;
    margin-bottom: 15px;
    font-weight: 700;
}

/* Banda roja */
.mapa-info h2 span {
    display: inline-block;
    background: var(--osgrap-red);
    color: #fff;
    padding: 6px 16px;
    position: relative;
}

/* Pico */
.mapa-info h2 span::after {
    content: "";
    position: absolute;
    top: 0;
    right: -14px;

    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 14px solid var(--osgrap-red);
}

/* Texto */
.mapa-info p {
    color: #bbb;
    margin-bottom: 20px;
    line-height: 1.7;
}

/* DATOS */
.mapa-datos {
    margin-top: 10px;
}

.mapa-datos p {
    margin: 6px 0;
    color: #ddd;
    font-size: 14px;
}

/* =========================
   BOTÓN PRO
========================= */
.btn-mapa {
    display: inline-block;
    margin-top: 25px;

    background: var(--osgrap-red);
    color: #fff;

    padding: 14px 32px;
    border-radius: 40px;
    text-decoration: none;

    font-weight: 600;
    letter-spacing: 0.5px;

    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}

.btn-mapa:hover {
    background: var(--osgrap-red-dark);
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
}

/* =========================
   MAPA
========================= */
.mapa-embed {
    position: relative;
    overflow: hidden;
}

.mapa-embed iframe {
    width: 100%;
    height: 100%;
    min-height: 420px;
    border: 0;

    filter: grayscale(20%) contrast(1.05);
}

/* Overlay integración */
.mapa-embed::after {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        to left,
        rgba(15,15,16,0.7) 0%,
        rgba(15,15,16,0.3) 40%,
        transparent 70%
    );

    pointer-events: none;
}

/* =========================
   LUZ AMBIENTAL (DETALLE PRO)
========================= */
.home-mapa::before {
    content: "";
    position: absolute;
    inset: 0;

    background: radial-gradient(
        circle at 20% 30%,
        rgba(255,255,255,0.04),
        transparent 60%
    );

    pointer-events: none;
}

/* =========================
   ANIMACIÓN (APPLE STYLE)
========================= */
.home-mapa .reveal {
    opacity: 0;
    transform: translateY(60px);
    transition: all 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-mapa .reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1024px) {
    .mapa-container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {

    .mapa-info {
        padding: 70px 25px;
        text-align: center;
        align-items: center;
    }

    .mapa-info h2 {
        font-size: 26px;
    }

    .mapa-embed iframe {
        min-height: 350px;
    }
}