#publicaciones_container.aconauto-container {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    max-width: 1300px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* ========== Filters ========== */

.aconauto-filters {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 28px !important;
}

.aconauto-filter-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-color: #1A2546 !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
    border-radius: 8px !important;
    padding: 8px 32px 8px 14px !important;
    font-family: inherit !important;
    font-size: 14px !important;
    cursor: pointer !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
}

.aconauto-filter-submit {
    background-color: #1A2546 !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
    border-radius: 8px !important;
    padding: 8px 20px !important;
    font-family: inherit !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: background 0.2s ease, color 0.2s ease !important;
}

.aconauto-filter-reset {
    color: #1A2546 !important;
    font-size: 13px !important;
    text-decoration: underline !important;
    opacity: 0.8 !important;
}

.aconauto-filter-reset:hover {
    opacity: 1 !important;
}

/* ========== Grid ==========
   Flex-wrap (not CSS grid 1fr columns): each card keeps its exact fixed
   size and the row simply wraps to fewer cards when space is limited,
   instead of dividing the container into forced fractions that shrink
   the fixed 420x655 / 275x345 dimensions. */

/* 3 x 420px cards + 2 x 20px gaps = 1300px, matching the container's max-width exactly */
.aconauto-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 20px !important;
    margin-bottom: 40px !important;
}

.aconauto-card-wrapper {
    flex: 0 0 420px !important;
    width: 420px !important;
}

.aconauto-card {
    width: 420px !important;
    height: 655px !important;
    box-sizing: border-box !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #1A2546 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* ========== Media row (arrows outside the image, inside the card) ========== */

.aconauto-media-row {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    padding: 28px 16px 0 !important;
}

.aconauto-carousel {
    position: relative !important;
    flex: 0 0 auto !important;
    width: 275px !important;
    height: 345px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #1A2546 !important;
}

.aconauto-slides {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
}

.aconauto-slide {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transition: opacity 0.35s ease !important;
    pointer-events: none !important;
}

.aconauto-slide--active {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.aconauto-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
}

.aconauto-date {
    position: absolute !important;
    bottom: 10px !important;
    right: 10px !important;
    z-index: 5 !important;
    background: rgba(0, 0, 0, 0.55) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    line-height: 1 !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Arrows: sit in the card gutter beside the image, not overlapping it */
.aconauto-arrow {
    flex: 0 0 auto !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    color: #1A2546 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    padding: 0 !important;
    transition: background 0.2s ease, color 0.2s ease !important;
}

.aconauto-arrow svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
}

/* ========== Content (fixed, does not move with the carousel) ========== */

.aconauto-card__content {
    flex: 1 1 auto !important;
    padding: 16px 20px 20px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

.aconauto-text {
    color: #ffffff !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 13 !important; /* fills the desktop card's remaining height, then ellipsis */
    line-clamp: 13 !important;
    -webkit-box-orient: vertical !important;
}

/* Rich text formatting for the ACF WYSIWYG content */
/* Force every nested element (blockquote, span, headings, inline styles from
   pasted content, etc.) to the same 13px white text regardless of the tag's
   own UA/user styles. */
.aconauto-text * {
    font-size: 13px !important;
    color: inherit !important;
}

.aconauto-text p {
    margin: 0 0 8px !important;
}

.aconauto-text p:last-child {
    margin-bottom: 0 !important;
}

.aconauto-text ul,
.aconauto-text ol {
    margin: 0 0 8px 18px !important;
    padding: 0 !important;
}

.aconauto-text li {
    margin: 0 0 4px !important;
}

.aconauto-text a {
    color: inherit !important;
    text-decoration: underline !important;
}

.aconauto-text strong,
.aconauto-text b {
    font-weight: 700 !important;
}

.aconauto-text em,
.aconauto-text i,
.aconauto-text cite {
    font-style: italic !important;
}

.aconauto-text blockquote {
    margin: 0 0 8px !important;
    padding: 4px 0 4px 12px !important;
    border-left: 3px solid rgba(255, 255, 255, 0.4) !important;
    font-style: italic !important;
}

.aconauto-text blockquote p:last-child {
    margin-bottom: 0 !important;
}

.aconauto-text img {
    max-width: 100% !important;
    height: auto !important;
}

/* ========== Pagination ========== */

.aconauto-pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 20px 0 !important;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 14px !important;
    clear: both !important;
    color: #ffffff !important;
}

.aconauto-pagination .page-numbers {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 8px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: background 0.2s ease, color 0.2s ease !important;
    box-sizing: border-box !important;
    border: none !important;
}

.aconauto-pagination .page-numbers.dots {
    background: transparent !important;
    cursor: default !important;
}

.aconauto-pagination .page-numbers.dots:hover {
    background: transparent !important;
}

.aconauto-empty {
    color: #333333 !important;
    text-align: center !important;
}

/* ========== Responsive ========== */
/* flex-wrap fits as many cards per row as the real available width allows.
   Desktop uses the exact 420x655 / 275x345 spec (up to 3 per row).
   Tablet and mobile switch to smaller fixed sizes (same 420:655 ratio)
   so 2, then 1, card(s) per row fit comfortably without cropping. */

@media (max-width: 1024px) {
    .aconauto-card-wrapper {
        flex-basis: 340px !important;
        width: 340px !important;
    }

    .aconauto-card {
        width: 340px !important;
        height: 531px !important;
    }

    .aconauto-carousel {
        width: 223px !important;
        height: 279px !important;
    }

    .aconauto-text {
        -webkit-line-clamp: 10 !important;
        line-clamp: 10 !important;
    }
}

@media (max-width: 460px) {
    #publicaciones_container.aconauto-container {
        padding: 0 12px !important;
    }

    .aconauto-card-wrapper {
        flex-basis: 300px !important;
        width: 300px !important;
    }

    .aconauto-card {
        width: 300px !important;
        height: 468px !important;
    }

    .aconauto-carousel {
        width: 196px !important;
        height: 246px !important;
    }

    .aconauto-text {
        -webkit-line-clamp: 9 !important;
        line-clamp: 9 !important;
    }

    .aconauto-media-row {
        padding: 22px 12px 0 !important;
        gap: 10px !important;
    }

    .aconauto-arrow {
        width: 30px !important;
        height: 30px !important;
    }

    .aconauto-arrow svg {
        width: 15px !important;
        height: 15px !important;
    }

    .aconauto-date {
        font-size: 11px !important;
        padding: 5px 10px !important;
    }

    .aconauto-filters {
        justify-content: center !important;
    }
}