#rbe {
    --rbe-white: #FFFFFF;
    --rbe-sand-1: #FFFEFF;
    --rbe-sand-3: #D8CFC7;
    --rbe-sand-7: #3A3735;
    --rbe-forest: #00402A;
    --rbe-sunset: #FF9C1A;
    --rbe-sunset-1: #C66D00;
    --rbe-sunset-2: #E3850D;
    --rbe-sunset-4: #FFCD52;

    container-type: inline-size;
    width: 100%;
    max-width: 980px;
    margin: 20px auto;
    box-sizing: border-box;
    text-align: left;
    background-color: var(--rbe-white);
    border: 1px solid var(--rbe-sand-3);
    border-radius: 15px;
    padding: 0;
}

#rbe * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-style: normal;
    font-weight: normal;
}

#rbe em {
    font-family: "IberPangea Text Italic" !important;
    font-style: italic;
}

#rbe ol,
#rbe ul {
    list-style: none;
}

#rbe ol li:before {
    content: none !important;
    display: none !important;
}

/* =========================================================================
   HORIZONTAL (contenido interior / desktop). Fluido: horizontal en %, ritmo
   vertical en px (constante entre 565 y 980, como el diseño).
   ========================================================================= */
#rbe .rbe__timeline {
    position: relative;
    height: 399px;
    margin: 42px 32px;
}

/* Rejilla: 7 líneas verticales punteadas en los límites de las 6 columnas */
#rbe .rbe__timeline::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(to bottom, var(--rbe-sand-3) 0 12px, transparent 12px 24px),
        repeating-linear-gradient(to bottom, var(--rbe-sand-3) 0 12px, transparent 12px 24px),
        repeating-linear-gradient(to bottom, var(--rbe-sand-3) 0 12px, transparent 12px 24px),
        repeating-linear-gradient(to bottom, var(--rbe-sand-3) 0 12px, transparent 12px 24px),
        repeating-linear-gradient(to bottom, var(--rbe-sand-3) 0 12px, transparent 12px 24px),
        repeating-linear-gradient(to bottom, var(--rbe-sand-3) 0 12px, transparent 12px 24px),
        repeating-linear-gradient(to bottom, var(--rbe-sand-3) 0 12px, transparent 12px 24px);
    background-position: 0 0, 16.667% 0, 33.333% 0, 50% 0, 66.667% 0, 83.333% 0, 100% 0;
    background-repeat: repeat-y;
    background-size: 1px 24px;
}

/* Años: --a (2023-25) izq, --b (2026-28) der → fila continua de 6 */
#rbe .rbe__years {
    position: absolute;
    top: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

#rbe .rbe__years--a { left: 0; width: 50%; }
#rbe .rbe__years--b { left: 50%; width: 50%; }

#rbe .rbe__year {
    color: var(--rbe-sand-7) !important;
    font-family: "IberPangea" !important;
    font-size: 24px;
    line-height: 28px;
    text-align: center;
}

/* Eje + "Duración 6 años" */
#rbe .rbe__axis {
    position: absolute;
    top: 86px;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--rbe-sand-7);
}

#rbe .rbe__axis::before,
#rbe .rbe__axis::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--rbe-sand-7);
    transform: translateY(-50%);
}

#rbe .rbe__axis::before { left: 0; }
#rbe .rbe__axis::after { right: 0; }

#rbe .rbe__axis-label {
    position: absolute;
    top: -44px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background-color: var(--rbe-white);
    border: 1px solid var(--rbe-sand-7);
    border-radius: 15px;
    padding: 8px 16px;
    color: var(--rbe-sand-7) !important;
    font-family: "IberPangea Text" !important;
    font-size: 16px;
    line-height: 20px;
}

#rbe .rbe__title {
    position: absolute;
    top: 112px;
    left: 12px;
    right: 12px;
    color: var(--rbe-sunset-1) !important;
    font-family: "IberPangea" !important;
    font-size: 24px;
    line-height: 28px;
}

#rbe .rbe__done {
    position: absolute;
    top: 152px;
    left: 10px;
    max-width: calc(100% - 20px);
    background-color: var(--rbe-white);
    border: 1px solid var(--rbe-sunset);
    border-radius: 100px;
    padding: 8px 16px;
    color: var(--rbe-sunset-1) !important;
    font-family: "IberPangea Text" !important;
    font-size: 16px;
    line-height: 20px;
}

/* Concesión + conector ⌐ */
#rbe .rbe__grant {
    position: absolute;
    top: 212px;
    left: 40px;
}

#rbe .rbe__grant-label {
    display: inline-flex;
    background-color: var(--rbe-white);
    border: 1px solid var(--rbe-sunset);
    border-radius: 100px;
    padding: 4px 16px;
    color: var(--rbe-sunset-1) !important;
    font-family: "IberPangea" !important;
    font-size: 18px;
    line-height: 22px;
}

#rbe .rbe__grant::before {
    content: "";
    position: absolute;
    left: -30px;
    top: 15px;
    width: 30px;
    height: 86px;
    border-left: 1px solid var(--rbe-sunset);
    border-top: 1px solid var(--rbe-sunset);
}

/* Etiquetas de periodo: centradas sobre su tramo de barra (fluido, sin desbordar) */
#rbe .rbe__period {
    position: absolute;
    text-align: center;
    border-radius: 15px;
    padding: 8px 16px;
    font-family: "IberPangea Text" !important;
    font-size: 16px;
    line-height: 20px;
    text-wrap: balance;
}

#rbe .rbe__period--eval {
    top: 253px;
    left: 25%;
    transform: translateX(-50%);
    width: 43cqi;
    background-color: var(--rbe-sunset-1);
    color: var(--rbe-white) !important;
}

#rbe .rbe__period--settle {
    top: 243px;
    left: 75%;
    transform: translateX(-50%);
    /* Ancho ligado al contenedor: ~242px @565 y ~412px @980 (como Figma).
       Mantiene 2 líneas en todo el rango horizontal y no desborda. */
    width: 43cqi;
    background-color: var(--rbe-sunset-4);
    color: var(--rbe-forest) !important;
}

/* Barra (23px) */
#rbe .rbe__bar {
    position: absolute;
    top: 313px;
    left: 0;
    right: 0;
    height: 23px;
    isolation: isolate;
}

#rbe .rbe__bar-part {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 100px;
    mix-blend-mode: multiply;
}

#rbe .rbe__bar-part--eval {
    left: 0;
    width: 51.2%;
    background-color: var(--rbe-sunset-2);
    z-index: 2;
}

#rbe .rbe__bar-part--settle {
    right: 0;
    width: 50.8%;
    background-color: var(--rbe-sunset-4);
    z-index: 1;
}

#rbe .rbe__bar-cap {
    position: absolute;
    left: 0;
    top: 0;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background-color: var(--rbe-white);
    border: 1px solid var(--rbe-sunset);
    z-index: 3;
}

/* 1/3 (bajo 2026/2027/2028) */
#rbe .rbe__thirds {
    position: absolute;
    top: 353px;
    left: 50%;
    right: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
}

#rbe .rbe__thirds span {
    background-color: var(--rbe-sunset-4);
    border-radius: 15px;
    padding: 4px 8px;
    color: var(--rbe-forest) !important;
    font-family: "IberPangea" !important;
    font-size: 18px;
    line-height: 22px;
}

/* =========================================================================
   VERTICAL (móvil) — único breakpoint. Fluido: gutter fijo a la izq
   (Duración + eje), contenido anclado left/right, ritmo vertical en px.
   ========================================================================= */
@container (max-width: 519px) {
    #rbe .rbe__timeline { margin: 0; height: 610px; }

    /* Rejilla: 4 líneas verticales (3 columnas), fluidas entre 72px y (100%-18px) */
    #rbe .rbe__timeline::before {
        background-image:
            repeating-linear-gradient(to bottom, var(--rbe-sand-3) 0 12px, transparent 12px 24px),
            repeating-linear-gradient(to bottom, var(--rbe-sand-3) 0 12px, transparent 12px 24px),
            repeating-linear-gradient(to bottom, var(--rbe-sand-3) 0 12px, transparent 12px 24px),
            repeating-linear-gradient(to bottom, var(--rbe-sand-3) 0 12px, transparent 12px 24px);
        background-position:
            72px 0,
            calc(72px + (100% - 90px) / 3) 0,
            calc(72px + (100% - 90px) * 2 / 3) 0,
            calc(100% - 18px) 0;
    }

    #rbe .rbe__year { font-size: 21px; line-height: 24px; text-align: left; }
    #rbe .rbe__years { grid-template-columns: repeat(3, minmax(0, 1fr)); width: auto; }
    #rbe .rbe__years--a { left: 72px; right: 18px; top: 31px; }
    #rbe .rbe__years--b { left: 72px; right: 18px; top: 375px; }

    #rbe .rbe__title { left: 71px; right: 18px; top: 71px; }

    #rbe .rbe__done { left: 70px; right: 18px; top: 138px; max-width: none; }

    #rbe .rbe__grant { left: 93px; top: 213px; }
    #rbe .rbe__grant::before { left: -22px; top: 17px; width: 22px; height: 84px; }

    #rbe .rbe__period--eval {
        left: 72px; right: 18px; top: 251px;
        transform: none; width: auto; max-width: none;
    }
    #rbe .rbe__period--settle {
        left: 72px; right: 18px; top: 425px;
        transform: none; width: auto;
    }

    #rbe .rbe__bar { inset: 0; height: auto; }
    #rbe .rbe__bar-part--eval { left: 63px; right: 16px; width: auto; top: 313px; height: 23px; }
    #rbe .rbe__bar-part--settle { left: 63px; right: 16px; width: auto; top: 526px; height: 23px; }
    #rbe .rbe__bar-cap { left: 63px; top: 313px; }

    #rbe .rbe__thirds { left: 72px; right: 18px; top: 565px; }

    /* Eje vertical + "Duración 6 años" girado, a la izquierda */
    #rbe .rbe__axis { left: 60px; top: 31px; right: auto; width: 1px; height: 564px; }
    #rbe .rbe__axis::before { left: 50%; top: 0; transform: translateX(-50%); }
    #rbe .rbe__axis::after { left: 50%; right: auto; top: auto; bottom: 0; transform: translateX(-50%); }
    /* "Duración 6 años" girado, centrado en el gutter izquierdo (~x30),
       nunca colgando fuera del card. El eje está en left:60px. */
    #rbe .rbe__axis-label {
        top: 50%;
        left: -30px;
        right: auto;
        transform: translate(-50%, -50%) rotate(-90deg);
        transform-origin: center;
    }
}