/* CSS específico para el snippet Portada reutilizable */
:root{ --vrp-primary: #2F7AE0; --vrp-dark:#192258 }

/*
  .s_portada_block recibe el background-image del editor como inline style.
  Solo necesita background-size:cover para que la imagen se muestre bien.
  La ALTURA viene del carousel interno (flujo normal de bloque).
*/
.s_portada_block {
    width: 100%;
    position: relative;
    overflow: hidden;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}

/* Wrapper: flujo normal, aporta la altura del carousel al bloque padre */
.vrp-portada-carousel-wrapper {
    display: block;
    width: 100%;
}

.vrp-portada-carousel { width:100%; height:60dvh; min-height:340px; position:relative; overflow:hidden; font-family:Arial, sans-serif; color:#fff; }
.vrp-portada-slide{ position:absolute; inset:0; overflow:hidden; }
.vrp-portada-bgimg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 35%; z-index:1; pointer-events:none; transition: object-position .25s ease; }
.vrp-portada-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.4); z-index:2 }
.vrp-portada-particles-layer{ position:absolute; inset:0; z-index:3; pointer-events:none }
.vrp-portada-texts{ position:absolute; inset:0; z-index:6; display:block; }
.vrp-portada-text{ position:relative; height:100%; text-align:center; }
.vrp-portada-text-title{ position:absolute; top:6%; left:50%; transform:translateX(-50%); z-index:6; margin:0 12px 8px; font-weight:900; font-size:clamp(20px,5vw,64px); text-transform:uppercase; text-shadow:0 6px 18px rgba(0,0,0,.45); white-space:nowrap; max-width:98vw; overflow:hidden; text-overflow:ellipsis; }
.vrp-portada-text-subtitle{ position:absolute; top:22%; left:50%; transform:translateX(-50%); z-index:6; margin:0 18px; max-width:1100px; width:calc(100% - 40px); text-shadow:0 4px 12px rgba(0,0,0,.35); white-space:normal; }
.vrp-portada-text-subtitle .vrp-portada-line1{ display:block; font-weight:800; font-size:clamp(18px,3.6vw,28px) }
.vrp-portada-text-subtitle .vrp-portada-line2{ display:block; font-weight:700; font-size:clamp(15px,3.4vw,24px); margin-top:6px }
@media (max-width:900px){
    .vrp-portada-text-title{ font-size:clamp(18px,5vw,44px); top:5%; white-space:normal; overflow:visible; text-overflow:clip; }
    .vrp-portada-text-subtitle{ top:18%; max-width:96vw; }
    .vrp-portada-bgimg{ object-position:50% 20%; }
}
@media (max-width:575.98px){
    .vrp-portada-particles-layer{ display:none }
    /* En mobile la altura viene del carousel; no tocar .s_portada_block */
    .vrp-portada-carousel{ height:65vh; min-height:380px; }
    /* Título: mantener posición absoluta, ajustar tamaño/wrapping */
    .vrp-portada-text-title{
        font-size:clamp(1.1rem,5.5vw,1.5rem) !important;
        white-space:normal !important; overflow:visible !important;
        text-overflow:clip !important; word-break:normal; overflow-wrap:break-word;
        width:calc(100% - 1.6rem) !important; max-width:calc(100% - 1.6rem) !important;
        margin:0;
        color:#fff !important;
        text-shadow:0 2px 10px rgba(0,0,0,0.9) !important;
    }
    /* Subtítulo: ajustar top para dar espacio al título que puede wrappear */
    .vrp-portada-text-subtitle{
        top:28% !important;
        width:calc(100% - 2.4rem) !important; max-width:calc(100% - 2.4rem) !important;
        color:#fff !important;
        text-shadow:0 2px 8px rgba(0,0,0,0.8);
    }
    .vrp-portada-text-subtitle .vrp-portada-line1{ font-size:0.95rem; text-shadow:0 2px 8px rgba(0,0,0,.85); }
    .vrp-portada-text-subtitle .vrp-portada-line2{ font-size:0.88rem; margin-top:4px; text-shadow:0 2px 8px rgba(0,0,0,.85); }
    .vrp-portada-bgimg{ object-position:50% 10%; }
}