/* ===================================================
   WELCOME SECTION - (MARCO CON CORTE DIAGONAL Y LÍNEAS ROJAS)
   =================================================== */

.welcome-section {
    position: relative;
    width: 100%;
    min-height: 500px;

    /* Estructura en 2 columnas: Texto a la izquierda y Marco a la derecha */
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: 40px;

    padding: 70px 8%;
    background: #ffffff;
    max-width: 1350px;
    margin: 0 auto;
}


/* =========================
   CONTENIDO DE TEXTO
========================= */

.welcome-content {
    max-width: 580px;
    z-index: 2;
}


/* ==========================================================================
   MARCO PRINCIPAL (AQUÍ SE CAMBIA EL TAMAÑO DE LA IMAGEN Y DEL MARCO JUNTOS)
   ========================================================================== */

.welcome-frame {
    position: relative;
    width: 100%;

    /* 🟢 MODIFICA AQUÍ EL TAMAÑO DEL MARCO Y LA IMAGEN: */
    max-width: 540px;  /* Ancho máximo de la imagen */
    height: 400px;     /* Altura de la imagen */

    margin-left: auto;
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.1));
}


/* =========================
   IMAGEN (SLIDER Y RECORTE)
========================= */

.welcome-images {
    position: relative;
    width: 100%;
    height: 100%;

    /* Corte diagonal en el lado izquierdo:
       (16% arriba-izq, 100% arriba-der, 100% abajo-der, 2% abajo-izq) */
    clip-path: polygon(16% 0%, 100% 0%, 100% 100%, 2% 100%);
    -webkit-clip-path: polygon(16% 0%, 100% 0%, 100% 100%, 2% 100%);

    overflow: hidden;
    background: #f4f6f9;
    border-radius: 0 16px 16px 0;
}

.welcome-slide {
    position: absolute;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center top;

    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.welcome-slide.active {
    opacity: 1;
}


/* ==========================================================================
   LÍNEAS ROJAS DECORATIVAS (SVG SUPERPUESTO)
   ========================================================================== */

.welcome-frame-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    overflow: visible;
    filter: drop-shadow(0 0 8px rgba(221, 48, 52, 0.45));
}


/* =========================
   RESPONSIVE (ADAPTACIÓN A MÓVILES)
========================= */

@media (max-width: 991.98px) {
    .welcome-section {
        grid-template-columns: 1fr;
        padding: 50px 6%;
        gap: 35px;
        text-align: center;
    }

    .welcome-content {
        max-width: 100%;
        margin: 0 auto;
    }

    .welcome-frame {
        /* 🟢 Tamaño en Tablets / Pantallas medianas */
        max-width: 500px;
        height: 350px;
        margin: 0 auto;
    }
}

@media (max-width: 576px) {
    .welcome-frame {
        /* 🟢 Tamaño en Teléfonos Celulares */
        max-width: 100%;
        height: 280px;
    }

    .welcome-images {
        clip-path: polygon(16% 0%, 100% 0%, 100% 100%, 2% 100%);
        -webkit-clip-path: polygon(16% 0%, 100% 0%, 100% 100%, 2% 100%);
    }
}