/* ===== Opciones por página: logo, hero slider y proceso ===== */

.rbl-vacio {
    padding: 16px;
    border: 2px dashed #c0b49d;
    color: #4f5660;
    background: #faf8f4;
    text-align: center;
    font-size: 14px;
}


/* ---------- Hero slider ---------- */
.rbl-hero {
    /* --rbl-hero-top: espacio que ocupa el header transparente de Astra sobre el slider.
       Se puede sobrescribir desde CSS personalizado (ej. .rbl-hero { --rbl-hero-top: 130px; }) */
    --rbl-hero-top: clamp(84px, 6vw, 118px);
    --rbl-logo-w: clamp(220px, 20vw, 340px);
    position: relative;
    width: 100%;
    overflow: hidden;
}
/* Los slides comparten la misma celda: la altura la da el slide más alto (nada se recorta) */
.rbl-hero__slides {
    display: grid;
    min-height: clamp(440px, 42vw, 640px);
}
.rbl-hero__slide {
    grid-area: 1 / 1;
    position: relative;
    display: flex;
    align-items: flex-end;
    background-color: #4f5660;
    background-size: cover;
    background-position: center;
    opacity: 0;
    visibility: hidden;
    z-index: 0;
    /* el slide saliente se mantiene opaco hasta que el entrante termina de aparecer */
    transition: opacity 0s linear .8s, visibility 0s linear .8s;
}
.rbl-hero__slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
    transition: opacity .8s ease, visibility 0s;
}
.rbl-hero__slide::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Capas configurables en Opciones de página: --rbl-ov2 (arriba) y --rbl-ov1 */
    background:
        linear-gradient(var(--rbl-ov2, rgba(0, 0, 0, .2)), var(--rbl-ov2, rgba(0, 0, 0, .2))),
        linear-gradient(var(--rbl-ov1, rgba(192, 180, 157, .4)), var(--rbl-ov1, rgba(192, 180, 157, .4)));
}
.rbl-hero__content {
    position: relative;
    z-index: 1;
    max-width: 820px;
    box-sizing: border-box;
    /* arriba: nunca por debajo del header; abajo: aire para los puntos */
    padding: var(--rbl-hero-top) clamp(20px, 5vw, 70px) clamp(52px, 5vw, 76px);
    color: #fff;
}

/* Logo: va dentro del contenido, justo encima del título (no choca con el header).
   Ancho total = --rbl-logo-w (Opciones de página), con o sin pastilla. */
.rbl-hero .rbl-hero__logo {
    box-sizing: border-box;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 clamp(14px, 1.6vw, 22px);
    padding: 0;
    background: none;
    border: 0;
    line-height: 0;
}
/* Pastilla configurable (casilla + color + opacidad en Opciones de página).
   El tirador mide el LOGO; la pastilla se dibuja alrededor con relleno proporcional al logo. */
.rbl-hero .rbl-hero__logo.has-pill {
    /* relleno configurable (px en escritorio; en pantallas pequeñas se limita por vw) */
    padding: min(var(--rbl-pill-py, 24px), 3.5vw) min(var(--rbl-pill-px, 56px), 7vw);
    border-radius: 999px;
    background: var(--rbl-pill);
}
.rbl-hero .rbl-hero__logo img {
    display: block !important;
    width: var(--rbl-logo-w) !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.rbl-hero__titulo {
    margin: 0 0 18px;
    color: #fff;
    font-size: clamp(1.6rem, 3.2vw, 2.6rem);
    line-height: 1.2;
    font-weight: 300;
}
.rbl-hero__titulo strong,
.rbl-hero__titulo b { font-weight: 700; }
.rbl-hero__items {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: clamp(.8rem, 1.1vw, .95rem);
}
.rbl-hero__items li { margin: 0; }
.rbl-hero__items li + li::before { content: "|"; margin: 0 14px; opacity: .8; }
.rbl-hero__items a,
.rbl-hero__items span { color: #fff; text-decoration: none; }
.rbl-hero__items a:hover { text-decoration: underline; }

.rbl-hero__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 10px;
}
.rbl-hero__dot {
    width: 12px;
    height: 12px;
    padding: 0;
    border: 1px solid #fff;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}
.rbl-hero__dot.is-active { background: #fff; }

/* ---------- Conoce nuestro proceso ---------- */
.rbl-proceso { --per-view: 5; --gap: 20px; width: 100%; }
.rbl-proceso__titulo {
    margin: 0 0 28px;
    text-align: center;
    color: #4f5660;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    font-weight: 300;
}
.rbl-proceso__titulo strong,
.rbl-proceso__titulo b { font-weight: 700; }
.rbl-proceso__viewport { overflow: hidden; padding-bottom: 6px; }
.rbl-proceso__track { display: flex; gap: var(--gap); will-change: transform; }

/* Card del proceso — réplica del diseño: foto arriba, franja blanca con punta de flecha (→) al borde derecho
   y círculo del mismo beige del cuerpo, con el icono, centrado sobre la franja.
   Todas las medidas salen del ancho de la card (cqw); los px son respaldo para navegadores sin container queries. */
.rbl-card {
    flex: 0 0 calc((100% - var(--gap) * (var(--per-view) - 1)) / var(--per-view));
    min-width: 0;
    container-type: inline-size; /* las medidas cqw de los hijos salen del ancho de esta card */
}
.rbl-card__in {
    height: 100%;
    --card-bg: #f3efe8;
    --franja: 4px;              /* grosor de la franja blanca */
    --flecha-w: 18px;           /* punta de flecha */
    --flecha-h: 20px;
    --icono-d: 44px;            /* diámetro del círculo del icono */
    background: var(--card-bg);
    border-radius: 16px;
    text-align: center;
    padding-bottom: 18px;
}
@supports (width: 1cqw) {
    .rbl-card__in {
        --franja: 2cqw;
        --flecha-w: 8.7cqw;
        --flecha-h: 9.7cqw;
        --icono-d: 20.7cqw;
        border-radius: 7.5cqw;
        padding-bottom: 5cqw;
    }
}
.rbl-card__media { position: relative; }
.rbl-card__foto {
    aspect-ratio: 600 / 427;
    border-radius: 16px 16px 0 0;
    background-color: #d9d2c4;
    background-size: cover;
    background-position: center;
}
@supports (width: 1cqw) { .rbl-card__foto { border-radius: 7.5cqw 7.5cqw 0 0; } }

/* Franja blanca de lado a lado, justo bajo la foto */
.rbl-card__media::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: var(--franja);
    background: #fff;
    z-index: 1;
}
/* Punta de flecha blanca apuntando a la derecha, pegada al borde, centrada en la franja */
.rbl-card__media::before {
    content: "";
    position: absolute;
    right: 0;
    top: calc(100% + var(--franja) / 2 - var(--flecha-h) / 2);
    width: var(--flecha-w);
    height: var(--flecha-h);
    background: #fff;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    z-index: 1;
}
/* Círculo del icono: color del cuerpo, centrado sobre la franja (mitad sobre la foto) */
.rbl-card__icono {
    position: absolute;
    left: 50%;
    top: calc(100% + var(--franja) / 2);
    width: var(--icono-d);
    height: var(--icono-d);
    transform: translate(-50%, -50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--card-bg);
}
.rbl-card__icono img { max-width: 46%; max-height: 46%; width: auto; height: auto; }
.rbl-card__body { padding: 0 14px; padding-top: calc(var(--icono-d) / 2 + var(--franja) + 10px); }
.rbl-card__titulo { margin: 0 0 6px; color: #4f5660; font-size: .95rem; font-weight: 700; line-height: 1.25; }
.rbl-card__desc { margin: 0; color: #7a7f87; font-size: .8rem; line-height: 1.35; }
@supports (width: 1cqw) {
    .rbl-card__body { padding-left: 5cqw; padding-right: 5cqw; padding-top: calc(var(--icono-d) / 2 + var(--franja) + 3.2cqw); }
    .rbl-card__titulo { font-size: 7.4cqw; margin-bottom: 1.6cqw; }
    .rbl-card__desc { font-size: 6cqw; }
}

@media (max-width: 1024px) { .rbl-proceso { --per-view: 3; } }
/* Celular: 1 card centrada en la pantalla */
@media (max-width: 600px) {
    .rbl-proceso { --per-view: 1; }
}

/* Flechas (desde tablet hacia abajo): círculos beige con flecha blanca a cada lado.
   El "stage" reserva el margen para las flechas; el viewport recorta justo en los bordes de las cards. */
.rbl-proceso__stage { position: relative; }
.rbl-proceso__nav { display: none; }
@media (max-width: 1024px) {
    .rbl-proceso.is-activo .rbl-proceso__stage { padding: 0 46px; }
    .rbl-proceso.is-activo .rbl-proceso__nav {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
        width: 34px;
        height: 34px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: #c0b49d;
        color: #fff;
        cursor: pointer;
        line-height: 0;
        box-shadow: none;
        transition: background .2s ease;
    }
    .rbl-proceso.is-activo .rbl-proceso__nav:hover,
    .rbl-proceso.is-activo .rbl-proceso__nav:focus-visible { background: #a89b82; }
    .rbl-proceso__nav--prev { left: 6px; }
    .rbl-proceso__nav--next { right: 6px; }
}

/* ---------- Hero en celular: todo el contenido centrado (logo, título, ítems) ---------- */
@media (max-width: 767px) {
    .rbl-hero__slide { justify-content: center; }
    .rbl-hero__content {
        width: 100%;
        max-width: 100%;
        text-align: center;
    }
    .rbl-hero .rbl-hero__logo {
        margin-left: auto;
        margin-right: auto;
    }
    .rbl-hero__titulo { text-align: center; }
    .rbl-hero__items {
        justify-content: center;
        text-align: center;
    }
}

/* ===== Experiencia y clientes ===== */
/* Medidas configurables en Opciones de página (variables inline: --foto-d, --circ-d, --solape, --entra, --tit-w) */
.rbl-exp {
    --per-view: 4;
    --gap: 16px;
    --foto: var(--foto-d, 224px);     /* diámetro del círculo con la foto */
    --circ: var(--circ-d, 196px);     /* diámetro del círculo de números */
    --montaje: var(--solape, 48px);   /* cuánto se montan horizontalmente los dos círculos */
    --overlap: var(--entra, 22px);    /* cuánto entra el círculo de números en el contenedor */
    width: 100%;
    box-sizing: border-box;
}
.rbl-exp *, .rbl-exp *::before, .rbl-exp *::after { box-sizing: border-box; }

/* Parte de arriba: título + círculos */
.rbl-exp__top {
    display: flex;
    align-items: center;
    gap: 28px;
}
.rbl-exp__titulo {
    flex: 0 1 var(--tit-w, 260px);
    margin: 0;
    color: #4f5660;
    font-size: clamp(1.1rem, 1.6vw, 1.4rem);
    font-weight: 300;
    line-height: 1.3;
}
.rbl-exp__titulo strong,
.rbl-exp__titulo b { font-weight: 700; }

.rbl-exp__circulos {
    position: relative;
    flex: 0 0 auto;
    width: calc(var(--foto) + var(--circ) - var(--montaje));
    height: calc(var(--foto) - 14px); /* los últimos 14px de la foto quedan tapados por el contenedor */
}
.rbl-exp__foto {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: var(--foto);
    height: var(--foto);
    border-radius: 50%;
    background-color: #d9d2c4;
    background-size: cover;
    background-position: center;
}
.rbl-exp__contadores {
    position: absolute;
    z-index: 3; /* por encima del contenedor de logos */
    left: calc(var(--foto) - var(--montaje));
    top: calc(var(--foto) - 14px + var(--overlap) - var(--circ));
    width: var(--circ);
    height: var(--circ);
    border-radius: 50%;
    background: #eceeee;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--circ) * .06);
    text-align: center;
}
.rbl-cont__num {
    color: #4f5660;
    font-size: calc(var(--circ) * .2);   /* el texto crece con el círculo */
    font-weight: 700;
    line-height: 1;
}
.rbl-cont__tit { margin-top: calc(var(--circ) * .03); color: #7a7f87; font-size: max(10px, calc(var(--circ) * .059)); line-height: 1.2; }

/* Contenedor de logos: por encima de la foto, por debajo del círculo de contadores */
.rbl-exp__logos {
    position: relative;
    z-index: 2;
    min-height: 110px;
    padding: calc(var(--overlap) + 22px) 32px 28px;
    border-radius: 16px;
    background: var(--rbl-expbg, #c3b3a5);
}
.rbl-exp__viewport { overflow: hidden; }
.rbl-exp__track { display: flex; gap: var(--gap); will-change: transform; align-items: center; }
.rbl-exp:not(.is-activo) .rbl-exp__track { justify-content: center; }
.rbl-exp__logo {
    flex: 0 0 calc((100% - var(--gap) * (var(--per-view) - 1)) / var(--per-view));
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
}
.rbl-exp__logo a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.rbl-exp__logo img { display: block; max-width: 82%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

/* Tablet: círculos y montajes un 15 % más chicos */
@media (max-width: 1024px) {
    .rbl-exp {
        --per-view: 3;
        --foto: calc(var(--foto-d, 224px) * .85);
        --circ: calc(var(--circ-d, 196px) * .85);
        --montaje: calc(var(--solape, 48px) * .85);
        --overlap: calc(var(--entra, 22px) * .85);
    }
    .rbl-exp__titulo { flex-basis: calc(var(--tit-w, 260px) * .85); }
}

/* Celular: todo centrado y apilado (foto → círculo de contadores encima → contenedor) */
@media (max-width: 767px) {
    .rbl-exp {
        --per-view: 1;
        --foto: min(var(--foto-d, 224px), 66vw);
        --circ: min(var(--circ-d, 196px), 52vw);
        --montaje: calc(var(--solape, 48px) * 1.45);  /* aquí el montaje es vertical */
        --overlap: min(calc(var(--entra, 22px) * 1.8), 60px);
    }
    .rbl-exp__top { flex-direction: column; align-items: center; gap: 22px; text-align: center; }
    .rbl-exp__titulo { flex: 0 0 auto; max-width: 320px; text-align: center; }
    .rbl-exp__circulos {
        width: 100%;
        height: calc(var(--foto) + var(--circ) - var(--montaje));
    }
    .rbl-exp__foto { left: 50%; transform: translateX(-50%); }
    .rbl-exp__contadores {
        left: 50%;
        transform: translateX(-50%);
        top: calc(var(--foto) - var(--montaje));
    }
    .rbl-exp__logos { margin-top: calc(var(--overlap) * -1); padding: calc(var(--overlap) + 28px) 24px 28px; }
}