/* ============================================================
   PAGE: PUBLICACIONES (Elementor #450)
============================================================ */

.elementor-450 .elementor-element.elementor-element-e3b575f {
    --display: flex;
    --min-height: 250px;
    --flex-direction: column;
    --container-widget-width: 100%;
    --container-widget-height: initial;
    --container-widget-flex-grow: 0;
    --container-widget-align-self: initial;
    --flex-wrap-mobile: wrap;
    --justify-content: flex-end;
}

    /* FIX: Se corrigió la ruta de localhost a ruta relativa */
    .elementor-450 .elementor-element.elementor-element-e3b575f:not(.elementor-motion-effects-element-type-background),
    .elementor-450 .elementor-element.elementor-element-e3b575f > .elementor-motion-effects-container > .elementor-motion-effects-layer {
        background-color: #8A62AF;
        background-image: url("/wp-content/uploads/2024/06/recursos_degradado.png");
    }

.elementor-widget-heading .elementor-heading-title {
    font-family: var(--e-global-typography-primary-font-family), Sans-serif;
    font-weight: var(--e-global-typography-primary-font-weight);
    color: var(--e-global-color-primary);
}

.elementor-450 .elementor-element.elementor-element-0a53b8a {
    text-align: center;
}

    .elementor-450 .elementor-element.elementor-element-0a53b8a .elementor-heading-title {
        font-family: "Futura", Sans-serif;
        font-size: 77px;
        font-weight: 900;
        color: #FFFFFF;
    }

.elementor-450 .elementor-element.elementor-element-10b9e5c {
    --display: flex;
    --flex-direction: column;
    --container-widget-width: 100%;
    --container-widget-height: initial;
    --container-widget-flex-grow: 0;
    --container-widget-align-self: initial;
    --flex-wrap-mobile: wrap;
}

.elementor-450 .elementor-element.elementor-element-606f753 {
    --spacer-size: 30px;
}

.elementor-450 .elementor-element.elementor-element-b5f6669 {
    margin: 14px 14px calc(var(--kit-widget-spacing, 0px) + 14px) 14px;
}

    .elementor-450 .elementor-element.elementor-element-b5f6669 .elementor-heading-title {
        font-family: "Futura", Sans-serif;
        font-size: 20px;
        font-weight: normal;
        -webkit-text-stroke-color: #000;
        stroke: #000;
        color: #666666;
    }

.elementor-450 .elementor-element.elementor-element-021869e {
    margin-top: 100px;
    margin-bottom: 100px;
}

.elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-filters {
    display: block;
    text-align: left;
    margin-bottom: 25px;
    padding: 0px 0px 0px 0px;
}

.elementor-450 .elementor-element.elementor-element-60ac8d7 .elementor-repeater-item-d3e1031,
.elementor-450 .elementor-element.elementor-element-60ac8d7 .elementor-repeater-item-08c5ad7,
.elementor-450 .elementor-element.elementor-element-60ac8d7 .elementor-repeater-item-3d138c1 {
    text-align: left;
    position: static;
    left: auto;
}

.elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-item-above-content,
.elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-item-below-content {
    padding: 10px 0px 0px 0px;
    border-radius: 0px 0px 0px 0px;
}

.elementor-450 .elementor-element.elementor-element-60ac8d7.wpr-item-styles-wrapper .wpr-grid-item {
    padding: 10px 0px 0px 0px;
    border-color: #E8E8E8;
    border-style: none;
}

.elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-item-title .inner-block a {
    border-style: none;
    padding: 0px 0px 0px 0px;
    color: #333333;
    border-color: #E8E8E8;
    transition-duration: 0.2s;
}

.elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-item-title .inner-block {
    margin: 0px 0px 5px 0px;
}

.elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-item-content .inner-block {
    border-style: none;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    color: #6A6A6A;
    border-color: #E8E8E8;
    width: 100%;
}

.elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-item-excerpt .inner-block {
    border-style: none;
    padding: 0px 0px 0px 0px;
    margin: 5px 0px 0px 0px;
    color: #666666;
    border-color: #E8E8E8;
    width: 100%;
}

.elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-item-date .inner-block > span,
.elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-item-time .inner-block > span {
    border-style: none;
    padding: 0px 0px 0px 0px;
    border-color: #E8E8E8;
}

.elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-item-date .inner-block {
    margin: 0px 7px 0px 0px;
    color: #AAAAAA;
}

.elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-item-time .inner-block {
    margin: 0px 0px 0px 0px;
    color: #9C9C9C;
}

.elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-item-author .inner-block a {
    border-style: none;
    padding: 0px 0px 0px 0px;
    color: #9C9C9C;
    border-color: #E8E8E8;
    transition-duration: 0.1s;
}

.elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-item-author .inner-block,
.elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-item-comments .inner-block,
.elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-item-read-more .inner-block,
.elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-item-lightbox .inner-block {
    margin: 0px 0px 0px 0px;
}

    .elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-item-comments .inner-block a {
        border-style: none;
        padding: 0px 0px 0px 0px;
        color: #AAAAAA;
        border-color: #E8E8E8;
        transition-duration: 0.1s;
        border-radius: 2px;
    }

    .elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-item-read-more .inner-block a {
        border-style: none;
        padding: 0px 0px 0px 0px;
        color: #F0C200;
        border-color: #E8E8E8;
        transition-duration: 0.1s;
        border-radius: 0px;
    }

    .elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-item-lightbox .inner-block > span {
        border-style: none;
        padding: 0px 0px 0px 0px;
        color: #ffffff;
        border-color: #E8E8E8;
        transition-duration: 0.1s;
        border-radius: 2px;
    }

.elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-sep-style-1:not(.wpr-grid-item-display-inline) .inner-block > span,
.elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-sep-style-1.wpr-grid-item-display-inline {
    width: 100%;
}

.elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-sep-style-1 .inner-block > span {
    border-bottom-width: 2px;
    border-bottom-color: #E8E8E8;
    border-bottom-style: solid;
    border-radius: 0px;
}

.elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-sep-style-1 .inner-block,
.elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-sep-style-2 .inner-block {
    margin: 15px 0px;
}

.elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-sep-style-2:not(.wpr-grid-item-display-inline) .inner-block > span,
.elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-sep-style-2.wpr-grid-item-display-inline {
    width: 20%;
}

.elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-sep-style-2 .inner-block > span {
    border-bottom-width: 2px;
    border-bottom-color: #605BE5;
    border-bottom-style: solid;
    border-radius: 0px;
}

.elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-tax-style-1 .inner-block a,
.elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-tax-style-2 .inner-block a {
    border-style: none;
    margin-right: 3px;
    color: #9C9C9C;
    border-color: #E8E8E8;
    transition-duration: 0.1s;
}

.elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-tax-style-1 .inner-block a {
    padding: 0px;
    border-radius: 0px;
}

.elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-tax-style-2 .inner-block a {
    padding: 0px 10px;
    color: #ffffff;
    background-color: #605BE5;
    border-radius: 3px;
}

.elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-media-hover-bg {
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    transition-duration: 0.3s;
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 10px;
}

.elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-animation-wrap:hover .wpr-grid-media-hover-bg {
    transition-delay: 0s;
}

.elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-item {
    border-radius: 0px;
}

.elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-image-wrap {
    border-color: #E8E8E8;
    border-style: none;
    border-radius: 10px;
}

.elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-item-title a {
    font-family: "Poppins", Sans-serif;
    font-size: 21px;
    font-weight: 600;
}

.elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-item-title .inner-block a:hover {
    color: #54595f;
}

.elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-item-excerpt {
    font-family: "Raleway", Sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-item-date,
.elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-item-date span {
    font-family: "Poppins", Sans-serif;
    font-size: 12px;
}

.elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-filters li {
    color: #7A7A7A;
    font-family: "Futura", Sans-serif;
    font-size: 13px;
    margin: 0px 5px 0px 0px;
}

    .elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-filters li > a,
    .elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-filters li > span {
        border-color: #E8E8E8;
        transition-duration: 0.3s;
        border-style: none;
        padding: 3px 15px;
        border-radius: 3px;
    }

        .elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-filters li > a:hover,
        .elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-filters li > span:hover,
        .elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-filters li > .wpr-active-filter {
            color: #FFFFFF;
            background-color: #5D42D1;
        }

.elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-pagination a,
.elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-pagination > div > span,
.elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-pagination span.wpr-disabled-arrow {
    color: #ffffff;
    background-color: #605BE5;
    border-style: none;
    padding: 8px 20px;
    border-radius: 3px;
}

    .elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-pagination a:hover,
    .elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-pagination > div > span:not(.wpr-disabled-arrow):hover,
    .elementor-450 .elementor-element.elementor-element-60ac8d7 .wpr-grid-pagination span.wpr-grid-current-page {
        background-color: #4A45D2;
    }

.elementor-450 .elementor-element.elementor-element-a10b1b7 > .elementor-element-populated {
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
}

.elementor-450 .elementor-element.elementor-element-869751f {
    --display: flex;
    --border-radius: 20px;
}

    .elementor-450 .elementor-element.elementor-element-869751f:not(.elementor-motion-effects-element-type-background),
    .elementor-450 .elementor-element.elementor-element-869751f > .elementor-motion-effects-container > .elementor-motion-effects-layer {
        background-color: #C8BFD7;
    }

.elementor-450 .elementor-element.elementor-element-2fed18d .elementor-heading-title {
    font-family: "Futura", Sans-serif;
    font-size: 29px;
    font-weight: 600;
    color: #000000;
}

.elementor-450 .elementor-element.elementor-element-733a9b6 .elementor-heading-title {
    font-family: "Futura", Sans-serif;
    font-weight: normal;
    color: #666666;
}

.elementor-450 .elementor-element.elementor-element-cc73803 {
    padding: 10px;
}

    .elementor-450 .elementor-element.elementor-element-cc73803 .wpr-button[type="submit"] {
        background-color: #5D42D1;
        color: #ffffff;
    }

        .elementor-450 .elementor-element.elementor-element-cc73803 .wpr-button[type="submit"]:hover {
            background-color: #132A56;
        }

.elementor-450 .elementor-element.elementor-element-82b40c4 {
    --display: flex;
    --flex-direction: column;
    --container-widget-width: 100%;
}

/* =========================================================
   MEDIA QUERIES
========================================================= */
@media(min-width: 768px) {
    .elementor-450 .elementor-element.elementor-element-e0b6a4c {
        width: 65%;
    }

    .elementor-450 .elementor-element.elementor-element-a10b1b7 {
        width: 35%;
    }
}

@media(max-width: 1366px) {
    .elementor-450 .elementor-element.elementor-element-021869e {
        padding: 0px 20px;
    }
}

@media(max-width: 1024px) {
    .elementor-450 .elementor-element.elementor-element-021869e {
        margin-top: 50px;
        margin-bottom: 100px;
    }
}

@media(max-width: 767px) {
    .elementor-450 .elementor-element.elementor-element-0a53b8a .elementor-heading-title {
        font-size: 45px;
    }
}

#publi-header {
    padding-bottom: 30px;
}

#div-publi {
    top: -60px !important;
}

/* =========================================================
   ACORDEÓN: Términos y Condiciones
========================================================= */
.accordion {
    background-color: white;
    width: 300px;
    overflow: hidden;
    transition: max-height 0.5s ease, padding 0.5s ease;
}

.accordion-header {
    background-color: white;
    padding: 15px;
    cursor: pointer;
    font-weight: bold;
    text-align: left;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    padding: 0 15px;
    transition: max-height 0.5s ease, padding 0.5s ease;
}

    .accordion-content.show {
        max-height: 1000px;
        padding: 15px;
    }

/* ============================================================
   GRILLA DE PUBLICACIONES Y ANIMACIÓN DE DESLIZAMIENTO
============================================================ */

/* 1. Contenedor Flexbox (Sin 'gap', usando márgenes negativos) */
#div-publi .wpr-grid {
    opacity: 1 !important;
    display: flex;
    flex-wrap: wrap;
    width: calc(100% + 30px); /* Compensa los márgenes de las tarjetas */
    margin: -15px;
    align-items: flex-start;
}

/* 2. Cada tarjeta de publicación */
#div-publi .wpr-grid-item {
    /* 50% de ancho menos los márgenes exactos */
    width: calc(50% - 30px);
    margin: 15px;
    /* LA MAGIA: Subimos el tiempo de 0.4s a 0.7s para que sea más suave y lento */
    transition: opacity 0.7s ease, transform 0.7s ease, max-height 0.7s ease, max-width 0.7s ease, margin 0.7s ease;
    opacity: 1;
    transform: scale(1);
    overflow: hidden;
    /* Topes máximos */
    max-height: 800px;
    max-width: 100%;
    will-change: opacity, transform, max-height, max-width;
}

/* 3. En móviles: 1 columna */
@media (max-width: 767px) {
    #div-publi .wpr-grid-item {
        width: calc(100% - 30px);
    }
}

/* 4. Clase controlada por JS para el estado "Oculto" */
.wpr-grid-item.wpr-faded-out {
    opacity: 0 !important;
    transform: scale(0.5) !important; /* Efecto de irse hacia el fondo */
    /* Colapsamos la tarjeta a 0x0 y quitamos los márgenes. 
       Esto hace que las demás tarjetas suban a ocupar el espacio */
    max-height: 0 !important;
    max-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    pointer-events: none;
}

/* 5. Filtros: cursor de mano */
#div-publi .wpr-grid-filters-item {
    cursor: pointer;
}

@media(max-width: 767px) {
    #div-publi .wpr-grid-item {
        width: 100%;
    }
}

/* ============================================================
   FORMULARIO DE SUSCRIPCIÓN (widget WPR form builder)
   Royal Addons no carga su CSS en el sitio, así que aquí se
   reconstruye el estilo de los campos para que el formulario
   se vea como la maqueta: inputs blancos a todo el ancho con
   borde sutil + botón morado a todo el ancho.
============================================================ */

/* Apila los campos (Nombre / Correo / botón) en columna */
.elementor-450 .elementor-element.elementor-element-cc73803 .wpr-form-fields-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.elementor-450 .elementor-element.elementor-element-cc73803 .wpr-field-group {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Inputs de texto y correo */
.elementor-450 .elementor-element.elementor-element-cc73803 .wpr-form-field-textual {
    width: 100%;
    padding: 12px 14px;
    font-family: "Futura", Sans-serif;
    font-size: 15px;
    line-height: 1.4;
    color: #333333;
    background-color: #FFFFFF;
    border: 1px solid #D9D3E4;
    border-radius: 6px;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s;
}

    .elementor-450 .elementor-element.elementor-element-cc73803 .wpr-form-field-textual::placeholder {
        color: #9C9C9C;
    }

    .elementor-450 .elementor-element.elementor-element-cc73803 .wpr-form-field-textual:focus {
        border-color: #5D42D1;
    }

/* Contenedor del botón a todo el ancho */
.elementor-450 .elementor-element.elementor-element-cc73803 .wpr-stp-btns-wrap {
    width: 100%;
}

/* Botón Enviar (el color ya está definido más arriba) */
.elementor-450 .elementor-element.elementor-element-cc73803 .wpr-button {
    display: block;
    width: 100%;
    padding: 12px 16px;
    font-family: "Futura", Sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s;
}

/* Aviso de suscripción (éxito / error) */
.b2-sub-alert {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    font-family: "Roboto", sans-serif;
    line-height: 1.4;
    margin-bottom: 12px;
}

.b2-sub-ok {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.b2-sub-err {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}