/**
 * Bloque Texto + Imagen - ALINEADO CON HERO BLOCK
 */
.rescop-text-image-block {
    width: 100%;
    position: relative;
    background: linear-gradient(0deg, white 0%, white 100%), white;
    overflow: hidden;
    padding: 60px 0 30px 0;
    padding-top: var(--rescop-space-3xl) !important;
    /* Resetear padding que pueda aplicar refinement-global.css */
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.rescop-text-image-container {
    /* Estructura idéntica a los contenedores de bloques */
    max-width: var(--rescop-container-max-width, 1280px);
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
    min-height: auto;
    padding-left: var(--rescop-container-padding, 1.5rem);
    padding-right: var(--rescop-container-padding, 1.5rem);
    /* Ancho interno disponible será calculado dinámicamente */
}

/* === LAYOUTS BLINDADOS PARA 1280px === */

/* Versión texto izquierda, imagen derecha */
.rescop-text-image-left {
    display: flex;
    width: 100%;
    min-height: auto; /* Auto para que se ajuste dinámicamente */
    gap: 72px; /* Gap de 72px blindado */
}

.rescop-text-image-left .rescop-text-content {
    /* COLUMNA IZQUIERDA: 579px BLINDADO */
    flex: 0 0 579px; /* flex-shrink: 0, flex-basis: 579px */
    width: 579px;
    box-sizing: border-box;
    order: 1; /* Texto primero (izquierda) */
}

.rescop-text-image-left .rescop-images-content {
    /* COLUMNA DERECHA: 507px BLINDADO */
    flex: 0 0 507px; /* flex-shrink: 0, flex-basis: 507px */
    width: 507px;
    box-sizing: border-box;
    order: 2; /* Imagen segundo (derecha) */
}

/* Versión imagen izquierda, texto derecha */
.rescop-text-image-right {
    display: flex;
    width: 100%;
    min-height: auto; /* Auto para que se ajuste dinámicamente */
    gap: 72px; /* Gap de 72px blindado */
}

.rescop-text-image-right .rescop-images-content {
    /* COLUMNA IZQUIERDA: 579px BLINDADO */
    flex: 0 0 579px; /* flex-shrink: 0, flex-basis: 579px */
    width: 579px;
    box-sizing: border-box;
    order: 1; /* Imagen primero (izquierda) */
}

.rescop-text-image-right .rescop-text-content {
    /* COLUMNA DERECHA: 507px BLINDADO */
    flex: 0 0 507px; /* flex-shrink: 0, flex-basis: 507px */
    width: 507px;
    box-sizing: border-box;
    order: 2; /* Texto segundo (derecha) */
}

/* === CONTENIDO DE TEXTO === */
.rescop-text-content {
    position: relative;
    /* Eliminamos cualquier restricción de altura para que el botón fluya naturalmente */
        min-height: auto;
    }
    
.rescop-text-content-title {
    /* Título con medidas exactas del diseño */
    color: black;
    font-size: 24px;
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    line-height: 36px;
    letter-spacing: 1.20px;
    word-wrap: break-word;
    margin: 0 0 30px 0;
    padding: 0;
    }
    
.rescop-text-content-body {
    /* Medidas exactas del diseño */
    color: rgba(0, 0, 0, 0.80);
    font-size: 18px;
    font-family: 'Merriweather Sans', sans-serif;
    font-weight: 400;
    line-height: 30px;
    word-wrap: break-word;
}

/* === ELEMENTOS INTERNOS DEL TEXTO === */
.rescop-text-content-body p,
.rescop-text-content-body div {
    color: rgba(0, 0, 0, 0.80);
    font-size: 18px;
    font-family: 'Merriweather Sans', sans-serif;
    font-weight: 400;
    line-height: 30px;
    word-wrap: break-word;
    margin: 0 0 20px 0;
    padding: 0;
}

.rescop-text-content-body p:last-child {
        margin-bottom: 0;
    }
    
/* === ELEMENTOS ESPECIALES DEL TEXTO === */
.rescop-text-content-body a {
    color: rgba(0, 0, 0, 0.80);
    text-decoration: underline;
    transition: all 0.3s ease;
    }
    
.rescop-text-content-body a:hover {
    color: #BE252D;
    }
    
.rescop-text-content-body ul,
.rescop-text-content-body ol {
    margin: 0 0 20px 25px;
    padding: 0;
}

.rescop-text-content-body li {
    margin: 0 0 10px 0;
    padding: 0;
}

.rescop-text-content-body strong,
.rescop-text-content-body b {
    font-weight: 700;
}

.rescop-text-content-body em,
.rescop-text-content-body i {
    font-style: italic;
}

.rescop-text-content-body br {
    line-height: 30px;
}

/* === MÚLTIPLES IMÁGENES === */
.rescop-images-content {
        position: relative;
    }
    
.rescop-image-item {
    width: 100%;
    height: 282px; /* Altura exacta del diseño */
    background: #E5E5E5;
    border: 1px solid rgba(0, 0, 0, 0.30);
    overflow: hidden;
    margin-bottom: 90px; /* Espacio entre imágenes según diseño */
}

.rescop-image-item:last-child {
    margin-bottom: 0;
}

.rescop-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rescop-image-placeholder {
    width: 100%;
    height: 282px;
    background: #E5E5E5;
    border: 1px solid rgba(0, 0, 0, 0.30);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 14px;
}

/* === BOTÓN CON MEDIDAS EXACTAS DEL DISEÑO === */
.rescop-text-image-button {
    position: relative;
    bottom: auto;
    left: 0;
    margin-top: 2rem; /* 2rem de separación desde el texto */
    width: 100%;
}
    
.rescop-text-image-button .rescop-button {
    /* Medidas exactas: 325x52px */
    width: 325px;
    height: 52px;
    background: linear-gradient(0deg, #BE252D 0%, #BE252D 100%), #ED2E38;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    position: relative;
}
    
.rescop-text-image-button .rescop-button:hover {
    background: linear-gradient(0deg, #9E1E25 0%, #9E1E25 100%);
    transform: translateY(-2px);
}

.rescop-text-image-button .rescop-button-text {
    /* Medidas exactas del diseño */
    color: white;
    font-size: 20px;
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    line-height: 36px;
    letter-spacing: 1.20px;
    word-wrap: break-word;
    text-decoration: none;
    text-align: center;
}

/* === RESPONSIVE MEJORADO === */

/* Pantallas muy grandes (1400px+) */
@media (min-width: 1400px) {
    .rescop-text-image-container {
        max-width: 1600px;
        
    }
    
    .rescop-text-image-left,
    .rescop-text-image-right {
        gap: 80px;
    }
}

/* Pantallas grandes (1281px - 1399px) */
@media (min-width: 1281px) and (max-width: 1399px) {
    .rescop-text-image-container {
        max-width: 1400px;
        padding: 0 70px;
    }
    
    .rescop-text-image-left,
    .rescop-text-image-right {
        gap: 75px;
    }
}

/* Tablets grandes (1024px - 1280px) - Mantener layout horizontal */
@media (min-width: 1024px) and (max-width: 1280px) {
    .rescop-text-image-container {
        padding: 0 40px;
    }
    
    .rescop-text-image-left,
    .rescop-text-image-right {
        gap: clamp(40px, 5vw, 72px);
    }
    
    .rescop-text-image-left .rescop-text-content,
    .rescop-text-image-right .rescop-text-content {
        flex: 1 1 45%;
        width: auto;
        min-width: 300px;
    }
    
    .rescop-text-image-left .rescop-images-content,
    .rescop-text-image-right .rescop-images-content {
        flex: 1 1 40%;
        width: auto;
        min-width: 280px;
    }
    
    /* Tipografía adaptativa */
    .rescop-text-content-title {
        font-size: clamp(20px, 2.2vw, 24px);
        line-height: clamp(28px, 3vw, 36px);
        margin-bottom: clamp(20px, 2.5vw, 30px);
    }
    
    .rescop-text-content-body,
    .rescop-text-content-body p,
    .rescop-text-content-body div {
        font-size: clamp(16px, 1.6vw, 18px);
        line-height: clamp(26px, 2.6vw, 30px);
    }
    
    .rescop-image-item {
        height: clamp(220px, 25vw, 282px);
        margin-bottom: clamp(50px, 7vw, 90px);
    }
    
    .rescop-image-placeholder {
        height: clamp(220px, 25vw, 282px);
    }
}

/* Tablets medianas (768px - 1023px) - Layout vertical */
@media (min-width: 768px) and (max-width: 1023px) {
    .rescop-text-image-block {
        padding: 40px 0 20px 0;
    }
    
    .rescop-text-image-container {
        padding: 0 40px;
    }
    
    /* Cambiar a layout vertical */
    .rescop-text-image-left,
    .rescop-text-image-right {
        display: flex;
        flex-direction: column;
        gap: 40px;
        align-items: center;
    }
    
    .rescop-text-image-left .rescop-text-content,
    .rescop-text-image-left .rescop-images-content,
    .rescop-text-image-right .rescop-text-content,
    .rescop-text-image-right .rescop-images-content {
        flex: none;
        width: 100%;
        max-width: 600px;
        order: unset;
        margin-bottom: 0;
    }
    
    /* En text-image-right, mantener imagen arriba */
    .rescop-text-image-right .rescop-images-content {
        order: 1;
    }
    
    .rescop-text-image-right .rescop-text-content {
        order: 2;
    }
    
    /* Tipografía para tablets */
    .rescop-text-content-title {
        font-size: 22px;
        line-height: 32px;
        margin-bottom: 25px;
        text-align: center;
    }
    
    .rescop-text-content-body,
    .rescop-text-content-body p,
    .rescop-text-content-body div {
        font-size: 17px;
        line-height: 28px;
        text-align: left;
    }
    
    .rescop-image-item {
        height: 250px;
        margin-bottom: 40px;
    }
    
    .rescop-image-placeholder {
        height: 250px;
    }
    
    .rescop-text-image-button {
        display: flex;
        justify-content: center;
        margin-top: 1.5rem;
    }
    
    .rescop-text-image-button .rescop-button {
        width: 300px;
    }
}

/* Móviles grandes (481px - 767px) */
@media (min-width: 481px) and (max-width: 767px) {
    .rescop-text-image-block {
        padding: 30px 0 15px 0;
    }
    
    .rescop-text-image-container {
        padding: 0 30px;
    }
    
    /* Layout vertical completo */
    .rescop-text-image-left,
    .rescop-text-image-right {
        display: flex;
        flex-direction: column;
        gap: 30px;
        align-items: stretch;
    }
    
    .rescop-text-image-left .rescop-text-content,
    .rescop-text-image-left .rescop-images-content,
    .rescop-text-image-right .rescop-text-content,
    .rescop-text-image-right .rescop-images-content {
        flex: none;
        width: 100%;
        max-width: none;
        order: unset;
        margin-bottom: 0;
    }
    
    /* En text-image-right, mantener imagen arriba */
    .rescop-text-image-right .rescop-images-content {
        order: 1;
    }
    
    .rescop-text-image-right .rescop-text-content {
        order: 2;
    }
    
    /* Tipografía para móviles grandes */
    .rescop-text-content-title {
        font-size: 20px;
        line-height: 28px;
        margin-bottom: 20px;
        text-align: left;
        letter-spacing: 0.8px;
    }
    
    .rescop-text-content-body,
    .rescop-text-content-body p,
    .rescop-text-content-body div {
        font-size: 16px;
        line-height: 26px;
        margin-bottom: 16px;
    }
    
    .rescop-image-item {
        height: 220px;
        margin-bottom: 25px;
    }
    
    .rescop-image-placeholder {
        height: 220px;
    }
    
    .rescop-text-image-button {
        margin-top: 1.5rem;
    }
    
    .rescop-text-image-button .rescop-button {
        width: 100%;
        max-width: 300px;
        height: 48px;
    }
    
    .rescop-text-image-button .rescop-button-text {
        font-size: 18px;
        line-height: 28px;
    }
}

/* Móviles pequeños (hasta 480px) */
@media (max-width: 480px) {
    .rescop-text-image-block {
        padding: 20px 0 10px 0;
    }
    
    .rescop-text-image-container {
        padding: 0 20px;
    }
    
    /* Layout vertical completo */
    .rescop-text-image-left,
    .rescop-text-image-right {
        display: flex;
        flex-direction: column;
        gap: 25px;
        align-items: stretch;
    }
    
    .rescop-text-image-left .rescop-text-content,
    .rescop-text-image-left .rescop-images-content,
    .rescop-text-image-right .rescop-text-content,
    .rescop-text-image-right .rescop-images-content {
        flex: none;
        width: 100%;
        max-width: none;
        order: unset;
        margin-bottom: 0;
    }
    
    /* En text-image-right, mantener imagen arriba */
    .rescop-text-image-right .rescop-images-content {
        order: 1;
    }
    
    .rescop-text-image-right .rescop-text-content {
        order: 2;
    }
    
    /* Tipografía para móviles pequeños */
    .rescop-text-content-title {
        font-size: 18px;
        line-height: 26px;
        margin-bottom: 18px;
        letter-spacing: 0.6px;
    }
    
    .rescop-text-content-body,
    .rescop-text-content-body p,
    .rescop-text-content-body div {
        font-size: 15px;
        line-height: 24px;
        margin-bottom: 15px;
    }
    
    .rescop-text-content-body ul,
    .rescop-text-content-body ol {
        margin-left: 20px;
    }
    
    .rescop-image-item {
        height: 180px;
        margin-bottom: 20px;
    }
    
    .rescop-image-placeholder {
        height: 180px;
        font-size: 12px;
    }
    
    .rescop-text-image-button {
        margin-top: 1.25rem;
    }
    
    .rescop-text-image-button .rescop-button {
        width: 100%;
        height: 44px;
        max-width: none;
    }
    
    .rescop-text-image-button .rescop-button-text {
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 0.8px;
    }
}

