.block-servicios-cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 46px;
    padding: var(--wp--custom--section--y) 0;
    overflow: hidden;
}

.block-servicios-cards.fondo-white-04 {
    background-color: var(--wp--preset--color--white-04);
    color: var(--wp--preset--color--black);
}

.block-servicios-cards.fondo-white-02 {
    background-color: var(--wp--preset--color--white-02);
    color: var(--wp--preset--color--black);
}

.block-servicios-cards.fondo-black {
    background-color: var(--wp--preset--color--black);
    color: var(--wp--preset--color--white);
}

.block-servicios-cards.fondo-main-blue {
    background-color: var(--wp--preset--color--main--blue);
    color: var(--wp--preset--color--white);
}

.inner-servicios-cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 46px;
    width: 100%;
    max-width: 1600px;
}

.servicios-cards-header {
    display: flex;
    flex-direction: column;
    text-align: center;
    row-gap: 20px;
    /* max-width: 860px; */
    padding: 0 20px;
}

.servicios-cards-eyebrow {
    display: inline-flex;
    align-items: center;
    align-self: center;
    column-gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--wp--preset--color--transparent--blue);
    border-radius: var(--wp--custom--radius--full);
    background-color: var(--wp--preset--color--transparent--blue);
    color: var(--wp--preset--color--main-blue);
    font-size: var(--wp--preset--font-size--small);
    font-weight: var(--wp--custom--weight-700);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.servicios-cards-eyebrow-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.servicios-cards-header h2 {
    margin: 0;
}

/* El salto manual del título (Enter en el campo) solo se aplica en móvil;
   en escritorio el salto de línea que nl2br deja tras el <br> hace de espacio. */
.servicios-cards-header h2 br,
.servicios-cards-2-header h2 br {
    display: none;
}

@media (max-width: 768px) {
    .servicios-cards-header h2 br,
    .servicios-cards-2-header h2 br {
        display: inline;
    }
}

.servicios-cards-header p {
    margin: 0;
}

.container-swiper-servicios-cards {
    position: relative;
    width: 100%;
}

.swiper-servicios-cards {
    padding: 10px 0;
}

.swiper-servicios-cards .swiper-slide {
    height: auto;
    width: 78%;
}

@media (min-width: 600px) {
    .swiper-servicios-cards .swiper-slide {
        width: 44%;
    }
}

@media (min-width: 900px) {
    .swiper-servicios-cards .swiper-slide {
        width: 29%;
    }
}

@media (min-width: 1200px) {
    .swiper-servicios-cards .swiper-slide {
        width: 22%;
    }
}

@media (min-width: 1440px) {
    .swiper-servicios-cards .swiper-slide {
        width: 306px;
    }
}

.servicio-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 160px;
    padding: 30px;
    border-radius: var(--wp--custom--radius--xl);
    box-shadow: var(--shadow-lg);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.servicio-card.has-link {
    cursor: pointer;
}

.servicio-card.has-link:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.servicio-card-full-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.servicio-card--azul {
    --card-color: var(--wp--preset--color--main-blue);
    background-color: var(--card-color);
}

.servicio-card--negro {
    --card-color: var(--wp--preset--color--black);
    background-color: var(--card-color);
}

.servicio-card--azul-vivo {
    --card-color: var(--wp--preset--color--hover-blue);
    background-color: var(--card-color);
}

.servicio-card--gris-oscuro {
    --card-color: var(--wp--preset--color--white-02);
    background-color: var(--card-color);
}

.servicio-card--gris-medio {
    --card-color: var(--wp--preset--color--white);
    background-color: var(--card-color);
}

/* Sobre fondo gris claro, la tarjeta blanca pasa a white-03 para no
   confundirse con el fondo de la sección. Sobre blanco claro (white-04) se
   mantiene en blanco puro (mismo criterio que texto-imagen/slider-cards). */
.block-servicios-cards.fondo-white-02 .servicio-card--gris-medio {
    --card-color: var(--wp--preset--color--white-03);
}

.servicio-card--gris-claro {
    --card-color: var(--wp--preset--color--white-02);
    background-color: var(--card-color);
}

.servicio-card-media {
    align-self: flex-end;
    width: 120px;
    height: 120px;
    margin-bottom: 20px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.servicio-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.servicio-card-titulo {
    margin: 0 0 12px;
    font-size: var(--wp--preset--font-size-h6);
    line-height: var(--wp--preset--line-height-h6);
    font-weight: var(--wp--custom--weight-700);
    color: var(--wp--preset--color--black);
}

.servicio-card-footer,
.servicio-card-footer-spacer {
    margin-top: auto;
}

.servicio-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.servicio-card-footer-spacer {
    display: block;
    height: 36px;
}

.servicio-card-link-text {
    font-size: var(--wp--preset--font-size--small);
    font-weight: var(--wp--custom--weight-400);
    color: var(--wp--preset--color--black);
    text-decoration: none;
}

.servicio-card-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--main-blue);
    transition: transform 0.3s ease;
}

.servicio-card.has-link:hover .servicio-card-arrow {
    transform: translateX(3px);
}

.servicios-cards-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    width: 100%;
    margin-top: 36px;
}

.servicios-cards-nav {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--black);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.servicios-cards-nav:hover {
    background-color: var(--wp--preset--color--white-02);
}

/* Sobre fondo gris claro, el control blanco pasa a white-03 para no
   confundirse con el fondo de la sección. Sobre blanco claro (white-04) se
   mantiene en blanco puro. */
.block-servicios-cards.fondo-white-02 .servicios-cards-nav {
    background-color: var(--wp--preset--color--white-03);
}

.servicios-cards-nav-prev {
    transform: scaleX(-1);
}

.servicios-cards-nav.swiper-button-disabled {
    opacity: 0.4;
    cursor: default;
}

.servicios-cards-controls .servicios-cards-pagination {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: auto;
    inset: auto;
}

.servicios-cards-controls .servicios-cards-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin: 0;
    background-color: var(--wp--preset--color--grey-05);
    opacity: 1;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.servicios-cards-controls .servicios-cards-pagination .swiper-pagination-bullet-active {
    background-color: var(--wp--preset--color--main-blue);
    transform: scale(1.2);
}

.servicios-cards-cta {
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
    gap: 20px;
    max-width: 900px;
    margin-top: -15px;
}

.servicios-cards-cta-title {
    display: inline-flex;
    align-items: center;
    padding: 13px 24px;
    border-radius: var(--wp--custom--radius--full);
    outline: 1px solid var(--wp--preset--color--main-blue);
    outline-offset: -2px;
    color: var(--wp--preset--color--main-blue);
    font-size: var(--wp--preset--font-size--small);
    font-weight: var(--wp--custom--weight-700);
    text-decoration: none;
    text-transform: uppercase;
}

/* .servicios-cards-cta-button: estilo desde "Botón unificado"
   (assets/css/base.css). */

@media (max-width: 920px) {
    .block-servicios-cards {
        padding: var(--wp--custom--section--y-mobile) 20px;
    }
}

@media (max-width: 768px) {
    .servicio-card {
        min-height: 280px;
        padding: 24px;
    }

    .servicios-cards-cta {
        flex-direction: column;
    }

    .servicios-cards-nav {
        width: 36px;
        height: 36px;
    }

    .servicios-cards-controls {
        gap: 16px;
    }
}

/*Swiper*/
.swiper {
    overflow: unset;
}

/* Estilo 2 — foto grande centrada y flecha desbordando la esquina.
   Mismos colores que el Estilo 1 (grises + blanco), solo cambia el layout. */
.block-servicios-cards--style_2 .servicio-card {
    padding: 24px;
    overflow: visible;
}

.block-servicios-cards--style_2 .servicio-card:not(.has-link) {
    height: auto;
    min-height: 0;
    aspect-ratio: 1 / 1;
}

.block-servicios-cards--style_2 .servicio-card-media {
    align-self: center;
    width: 68%;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 10px 0 20px;
}

.block-servicios-cards--style_2 .servicio-card-titulo {
    margin-bottom: 0;
}

.block-servicios-cards--style_2 .servicio-card-footer {
    display: block;
    margin-top: auto;
}

.block-servicios-cards--style_2 .servicio-card-footer-spacer {
    display: none;
}

.block-servicios-cards--style_2 .servicio-card-link-text {
    font-weight: var(--wp--custom--weight-400);
    text-decoration: none;
}

/* La esquina inferior derecha se recorta con un cuarto de círculo (mismo
   radio que el botón) para que la tarjeta le "ceda" el hueco a la flecha en
   vez de que esta quede apilada encima. Solo con CSS, sin SVG.
   El fondo + el recorte viven en un ::before aparte: si el mask fuera
   directo sobre .servicio-card, recortaría también a sus hijos (la propia
   flecha), haciéndola invisible dentro del hueco. */
.block-servicios-cards--style_2 .servicio-card.has-link {
    --arrow-size: 48px;
    background-color: transparent;
    box-shadow: none;
}

.block-servicios-cards--style_2 .servicio-card.has-link::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: var(--card-color);
    box-shadow: var(--shadow-lg);
    mask-image: radial-gradient(circle at 100% 100%, transparent calc(var(--arrow-size) / 2), #000 calc(var(--arrow-size) / 2 + 1px));
    -webkit-mask-image: radial-gradient(circle at 100% 100%, transparent calc(var(--arrow-size) / 2), #000 calc(var(--arrow-size) / 2 + 1px));
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

.block-servicios-cards--style_2 .servicio-card.has-link:hover::before {
    box-shadow: var(--shadow-xl);
}

.block-servicios-cards--style_2 .servicio-card-base-link {
    position: absolute;
    right: 0;
    bottom: 0px;
    background-color: var(--wp--preset--color--white-02);
    z-index: 2;
    width: 80px;
    height: 70px;
    border-radius: 200px 0px 0px;
}

.block-servicios-cards--style_2 .servicio-card-arrow {
    position: absolute;
    right: calc(var(--arrow-size, 48px) / 8);
    bottom: calc(var(--arrow-size, 48px) / 30);
    width: var(--arrow-size, 48px);
    height: var(--arrow-size, 48px);
    box-shadow: var(--shadow-md);
}

@media (max-width: 768px) {
    .block-servicios-cards--style_2 .servicio-card {
        padding: 20px;
    }

    .block-servicios-cards--style_2 .servicio-card.has-link {
        --arrow-size: 40px;
    }
}

/* Móvil/tablet (≤920px) — filas a todo el ancho, una debajo de otra.
   Imagen pegada al borde izquierdo (a toda la altura de la fila), título en
   medio, círculo con flecha pegado al borde derecho (solo si hay enlace).
   Mismo color de fondo por tarjeta que en escritorio — no se fuerza blanco.
   Sustituye al acordeón que había antes en este breakpoint. */
.servicios-cards-mobile-list {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}

.servicio-card-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 90px;
    padding-right: 16px;
    border-radius: var(--wp--custom--radius--md);
    overflow: hidden;
    background-color: var(--card-color, var(--wp--preset--color--white-02));
}

.servicio-card-row.has-link {
    cursor: pointer;
}

.servicio-card-row--azul {
    --card-color: var(--wp--preset--color--main-blue);
}

.servicio-card-row--negro {
    --card-color: var(--wp--preset--color--black);
}

.servicio-card-row--azul-vivo {
    --card-color: var(--wp--preset--color--hover-blue);
}

.servicio-card-row--gris-oscuro {
    --card-color: var(--wp--preset--color--white-02);
}

.servicio-card-row--gris-medio {
    --card-color: var(--wp--preset--color--white);
}

.block-servicios-cards.fondo-white-02 .servicio-card-row--gris-medio {
    --card-color: var(--wp--preset--color--white-03);
}

.servicio-card-row--gris-claro {
    --card-color: var(--wp--preset--color--white-02);
}

.servicio-card-row-media {
    align-self: stretch;
    flex-shrink: 0;
    width: 90px;
}


.servicio-card-row-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
    padding: 10px;
}


.servicio-card-row-titulo {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 12px 0;
    font-size: var(--wp--preset--font-size-h6);
    line-height: var(--wp--preset--line-height-h6);
    font-weight: var(--wp--custom--weight-700);
    color: var(--wp--preset--color--black);
}

.servicio-card-row .servicio-card-arrow {
    flex-shrink: 0;
}

@media (max-width: 920px) {

    .container-swiper-servicios-cards,
    .servicios-cards-controls {
        display: none;
    }

    .servicios-cards-mobile-list {
        display: flex;
    }

    .servicio-card-row-titulo {
        font-size: var(--wp--preset--font-size--medium);
        line-height: var(--wp--preset--line-height--medium);
    }
}

/* ============================================================
   Estilo 3 — foto grande con overlay al pasar el ratón
   (heredado del antiguo bloque servicios-cards-2, fusionado aquí
   como opción del selector "estilo_cards")
   ============================================================ */
.block-servicios-cards-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 46px;
    padding: var(--wp--custom--section--y) 0;
    overflow: hidden;
}

.block-servicios-cards-2.fondo-white-04 {
    background-color: var(--wp--preset--color--white-04);
    color: var(--wp--preset--color--black);
}

.block-servicios-cards-2.fondo-white-02 {
    background-color: var(--wp--preset--color--white-02);
    color: var(--wp--preset--color--black);
}

.block-servicios-cards-2.fondo-black {
    background-color: var(--wp--preset--color--black);
    color: var(--wp--preset--color--white);
}

.block-servicios-cards-2.fondo-main-blue {
    background-color: var(--wp--preset--color--main--blue);
    color: var(--wp--preset--color--white);
}

.inner-servicios-cards-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 46px;
    width: 100%;
    max-width: 1600px;
}

.servicios-cards-2-header {
    display: flex;
    flex-direction: column;
    text-align: center;
    row-gap: 20px;
    max-width: 860px;
    padding: 0 20px;
}

.servicios-cards-2-header h2 {
    margin: 0;
}

.servicios-cards-2-header p {
    margin: 0;
}

.container-swiper-servicios-cards-2 {
    position: relative;
    width: 100%;
}

.swiper-servicios-cards-2 {
    padding: 10px 0;
}

.swiper-servicios-cards-2 .swiper-slide {
    height: auto;
    width: 74%;
    aspect-ratio: 3 / 4;
}

@media (min-width: 600px) {
    .swiper-servicios-cards-2 .swiper-slide {
        width: 42%;
    }
}

@media (min-width: 900px) {
    .swiper-servicios-cards-2 .swiper-slide {
        width: 27%;
    }
}

@media (min-width: 1200px) {
    .swiper-servicios-cards-2 .swiper-slide {
        width: 21%;
    }
}

@media (min-width: 1440px) {
    .swiper-servicios-cards-2 .swiper-slide {
        width: 300px;
    }
}

.servicio-card-2 {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: var(--wp--custom--radius--xl);
    overflow: hidden;
    background-color: var(--wp--preset--color--white);
}

/* Sobre fondo gris claro, la tarjeta blanca pasa a white-03 para no
   confundirse con el fondo de la sección. Sobre blanco claro (white-04) se
   mantiene en blanco puro (mismo criterio que texto-imagen/slider-cards). */
.block-servicios-cards-2.fondo-white-02 .servicio-card-2 {
    background-color: var(--wp--preset--color--white-03);
}

.servicio-card-2.has-link {
    cursor: pointer;
}

.servicio-card-2-full-link {
    position: absolute;
    inset: 0;
    z-index: 3;
}

.servicio-card-2-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter 0.4s ease, transform 0.4s ease;
}

.servicio-card-2-veil {
    position: absolute;
    inset: 0;
    background-color: color-mix(in srgb, var(--wp--preset--color--main-blue) 70%, #000 30%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.servicio-card-2-label {
    display: flex;
    justify-self: center;
    position: absolute;
    bottom: 45%;
    z-index: 2;
    padding: 10px 16px;
    border-radius: var(--wp--custom--radius--full);
    background-color: color-mix(in srgb, var(--wp--preset--color--main-blue) 25%, #000 15%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--wp--preset--color--white);
    font-family: "Space Grotesk", sans-serif;
    font-size: var(--wp--preset--font-size--small);
    font-weight: var(--wp--custom--weight-700);
    text-align: center;
    transition: opacity 0.3s ease;
}

.servicio-card-2-hover {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 24px;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.servicio-card-2-hover-titulo {
    color: var(--wp--preset--color--white);
    font-family: "Space Grotesk", sans-serif;
    font-size: var(--wp--preset--font-size-h6);
    line-height: var(--wp--preset--line-height-h6);
    font-weight: var(--wp--custom--weight-700);
}

.servicio-card-2:hover .servicio-card-2-photo {
    filter: blur(8px);
    transform: scale(1.05);
}

.servicio-card-2:hover .servicio-card-2-veil {
    opacity: 0.85;
}

.servicio-card-2:hover .servicio-card-2-label {
    opacity: 0;
}

.servicio-card-2:hover .servicio-card-2-hover {
    opacity: 1;
    pointer-events: auto;
}

.servicios-cards-2-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    width: 100%;
}

.servicios-cards-2-nav {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--main-blue);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.servicios-cards-2-nav:hover {
    background-color: var(--wp--preset--color--white-02);
}

/* Sobre fondo gris claro, el control blanco pasa a white-03 para no
   confundirse con el fondo de la sección. Sobre blanco claro (white-04) se
   mantiene en blanco puro. */
.block-servicios-cards-2.fondo-white-02 .servicios-cards-2-nav {
    background-color: var(--wp--preset--color--white-03);
}

.servicios-cards-2-nav-prev {
    transform: scaleX(-1);
}

.servicios-cards-2-nav.swiper-button-disabled {
    opacity: 0.4;
    cursor: default;
}

.servicios-cards-2-controls .servicios-cards-2-pagination {
    position: relative;
    display: none;
    align-items: center;
    gap: 10px;
    width: auto;
    inset: auto;
}

.servicios-cards-2-controls .servicios-cards-2-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin: 0;
    background-color: var(--wp--preset--color--grey-05);
    opacity: 1;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.servicios-cards-2-controls .servicios-cards-2-pagination .swiper-pagination-bullet-active {
    background-color: var(--wp--preset--color--main-blue);
    transform: scale(1.2);
}

.servicios-cards-2-cta {
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
    gap: 20px;
    max-width: 900px;
    margin-top: -15px;
}

/* .servicios-cards-2-cta-button: estilo desde "Botón unificado"
   (assets/css/base.css). */

@media (max-width: 920px) {
    .block-servicios-cards-2 {
        padding: var(--wp--custom--section--y-mobile) 0;
    }
}

@media (max-width: 768px) {
    .servicios-cards-2-cta {
        flex-direction: column;
    }

    .servicios-cards-2-nav {
        width: 36px;
        height: 36px;
        padding: .3rem .4rem;
    }

    .servicios-cards-2-controls {
        gap: 16px;
    }
}

/* Selector con más especificidad que el ".swiper{overflow:unset}" de este
   mismo archivo (regla global, sin espacio de nombres) para que este
   carrusel no herede ese cambio cuando conviven en la misma página. */
.block-servicios-cards-2 .swiper-servicios-cards-2 {
    overflow: hidden;
}