/* ==============================================
   FOOTER 2026 — prototipo (solo page-1087241)
   Valores copiados del footer vivo (plantilla Elementor 939030) donde coinciden:
   lila del pre-footer, tinta del footer, Proxima Nova, enlaces blancos.
   ============================================== */

.runa-f26,
.runa-f26-pre {
    font-family: "Proxima Nova", sans-serif;
    color: #fff;
}

.runa-f26__container {
    width: min(100%, 1140px);
    margin: 0 auto;
    position: relative;
}

/* Placeholder de un asset pendiente (DESIGN.md: fondo suave, radio 16px) */
.runa-f26__placeholder {
    background: var(--runa-soft);
    border-radius: var(--runa-radius-card);
    opacity: 0.35;
}

/* ---------- Pre-footer lila: dos CTAs ---------- */
.runa-f26-pre {
    background: var(--runa-accent-theme);
    padding: 20px 16px;
}

.runa-f26-pre__grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

/* Separador punteado entre las dos celdas: mismo patrón que
   .runa-spotlight__grid::after. */
.runa-f26-pre__grid::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    border-left: 1px dashed #fff;
}

.runa-f26-pre__cell {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 16px;
}

.runa-f26-pre__eyebrow,
.runa-f26-pre__title,
.runa-f26-pre__text {
    white-space: nowrap;
}

.runa-f26-pre__cell + .runa-f26-pre__cell {
    padding-left: 40px;
}

.runa-f26-pre__cell:first-child {
    padding-right: 40px;
}

.runa-f26-pre__eyebrow {
    font-size: 14px;
    font-weight: 700;
    color: var(--runa-mod-lilac);
    margin-bottom: 0 !important;
}

.runa-f26-pre__title {
    margin: 0 0 10px;
    font-size: 26px !important;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}

.runa-f26-pre__text {
    margin: 0 0 16px !important;
    font-size: 16px;
    color: #fff;
}

/* Alto fijo: las dos imágenes miden lo mismo aunque el texto de cada celda
   deje un ancho distinto a la columna de la imagen. */
.runa-f26-pre__media {
    height: 200px;
}

.runa-f26-pre__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Botón pill (DESIGN.md §8). !important: el kit de Elementor pinta los <a> de lila */
.runa-f26-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    padding: 12px 24px;
    border-radius: var(--runa-radius-pill);
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--runa-t-color), color var(--runa-t-color), border-color var(--runa-t-color);
}

.runa-f26-btn--accent {
    background: #f5a623;
    border: 1px solid #f5a623;
    color: #fff !important;
}

.runa-f26-btn--accent:hover {
    background: var(--runa-ink);
    border-color: var(--runa-ink);
}

.runa-f26-btn--white {
    background: #fff;
    border: 1px solid #fff;
    color: var(--runa-accent-theme) !important;
}

.runa-f26-btn--white:hover {
    background: var(--runa-ink);
    border-color: var(--runa-ink);
    color: #fff !important;
}

/* ---------- Footer oscuro ---------- */
.runa-f26 {
    background: var(--runa-surface);
    padding: 56px 16px 24px;
}

.runa-f26 a {
    /* !important: el kit de Elementor (.elementor-kit-* a) pinta los enlaces de lila */
    color: #fff !important;
    text-decoration: none;
    transition: opacity var(--runa-t-color);
}

.runa-f26 a:hover {
    opacity: 0.75;
}

.runa-f26 ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.runa-f26__top {
    display: grid;
    grid-template-columns: minmax(0, 320px) 1fr;
    gap: 20px;
    align-items: start;
}

/* Marca, tagline, redes, newsletter */
.runa-f26__logo img {
    display: block;
    width: 103px;
    height: 64px;
    /* El logo es lila sobre blanco; aquí va blanco sobre tinta */
    filter: brightness(0) invert(1);
}

.runa-f26__tagline {
    margin: 32px 0 16px !important;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
}

.runa-f26__desc {
    margin: 0 0 28px !important;
    font-size: 16px;
    line-height: 1.5;
    color: #fff;
}

.runa-f26__social {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-bottom: 36px !important;
}

.runa-f26__social a {
    display: block;
    line-height: 0;
}

.runa-f26__social svg {
    height: 26px;
    width: auto;
    fill: #fff;
}

/* Caja de newsletter: panel un tono más claro que el fondo. Va en la fila 2
   del bloque superior y se extiende bajo la marca y la columna Software. */
.runa-f26-news {
    grid-column: 1 / -1;
    width: 50%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: #423876;
    border-radius: var(--runa-radius-card);
}

.runa-f26-news__copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 0 1 auto;
    min-width: 0;
}

.runa-f26-news__title {
    font-size: 16px;
    font-weight: 700;
}

.runa-f26-news__text {
    font-size: 13px;
}

.runa-f26-news__field {
    flex: 1 0 170px;
    min-width: 0;
}

/* Columnas de enlaces */
.runa-f26__cols {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
}

.runa-f26__col-title {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.runa-f26__col ul {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.runa-f26__col li {
    line-height: 1;
}

.runa-f26__col a {
    font-size: 14px;
    line-height: 1 !important;
}

/* Decoración (manuscrito + sonrisa): anclada al pie del footer, a la derecha
   de las franjas de seguridad, países y legales. */
.runa-f26__art {
    position: absolute;
    right: -40px;
    bottom: 20px;
    width: 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    pointer-events: none;
    transform: rotate(-20deg);
}

.runa-f26__art-lettering {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
}

/* Anotación manuscrita: mismo patrón que [runa_planes_cards] / [runa_ratings]
   (fuente Square Peg), aquí sin flecha. */
.runa-f26__art-text {
    display: block;
    font-family: 'Square Peg', cursive;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--runa-mod-purple);
    text-align: center;
    margin-bottom: -32px;
}

/* Renglones como bloques propios en vez de <br>: NitroPack quita las
   etiquetas <br> al minificar el HTML. */
.runa-f26__art-line {
    display: block;
    white-space: nowrap;
}

.runa-f26__art-smile {
    width: 100%;
    height: auto;
    aspect-ratio: 663 / 427;
}

/* Franjas: seguridad, países, legal — al 64% para dejar sitio a la sonrisa */
.runa-f26__trust {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 68%;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
}

.runa-f26__trust--paises {
    margin-top: 20px;
    padding-top: 0;
    border-top: 0;
}

.runa-f26__trust-label {
    flex: 0 0 110px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.runa-f26__trust-label strong {
    font-size: 10px;
}

.runa-f26__trust-label span {
    font-size: 8px;
}

.runa-f26__badges {
    display: flex;
    flex-wrap: nowrap;
}

.runa-f26__badges li {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 6px;
    border-left: 1px solid rgba(255, 255, 255, 0.35);
}

.runa-f26__badges li:first-child {
    border-left: 0;
    padding-left: 0;
}

.runa-f26__badge-icon {
    display: block;
    width: 18px;
    height: 22px;
    border-radius: 4px;
    flex-shrink: 0;
}

.runa-f26__badge-text {
    display: flex;
    flex-direction: column;
    font-size: 10px;
    line-height: 1.3;
    white-space: nowrap;
}

.runa-f26__paises {
    display: flex;
    flex-wrap: nowrap;
}

.runa-f26__paises li {
    padding: 0 10px;
    font-size: 10px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-left: 1px solid rgba(255, 255, 255, 0.35);
}

.runa-f26__paises li:first-child {
    border-left: 0;
    padding-left: 0;
}

.runa-f26__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    width: 70%;
    margin-top: 32px;
    font-size: 11px;
    white-space: nowrap;
}

.runa-f26__legal ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 0;
}

.runa-f26__legal li + li::before {
    content: "·";
    margin: 0 10px;
    opacity: 0.7;
}

/* ---------- Tablet / móvil ---------- */
@media (max-width: 1024px) {
    .runa-f26-pre__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .runa-f26-pre__grid::after {
        display: none;
    }

    .runa-f26-pre__cell + .runa-f26-pre__cell {
        border-top: 1px dashed #fff;
        padding-left: 0;
        padding-top: 32px;
    }

    .runa-f26-pre__cell:first-child {
        padding-right: 0;
    }

    .runa-f26__top {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .runa-f26__cols {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .runa-f26__art {
        display: none;
    }

    .runa-f26__trust,
    .runa-f26__legal {
        width: 100%;
    }

}

@media (max-width: 767px) {
    .runa-f26-pre__cell {
        grid-template-columns: 1fr;
    }

    .runa-f26-pre__media {
        height: auto;
        aspect-ratio: 1312 / 817;
    }

    .runa-f26-pre__title {
        font-size: 28px;
    }

    .runa-f26-pre__eyebrow,
    .runa-f26-pre__title,
    .runa-f26-pre__text {
        white-space: normal;
    }

    /* El pill crece en móvil (DESIGN.md §8) */
    .runa-f26-btn {
        width: 100%;
        padding: 20px;
        font-size: 16px;
    }

    .runa-f26__tagline {
        font-size: 28px;
    }

    /* Columnas CSS en vez de grid: las listas tienen alturas muy distintas y
       una fila de grid dejaba un hueco bajo la columna corta. */
    .runa-f26__cols {
        display: block;
        columns: 2;
        column-gap: 20px;
    }

    .runa-f26__col {
        break-inside: avoid;
        margin-bottom: 24px;
    }

    .runa-f26__social {
        margin-bottom: 0 !important;
    }

    .runa-f26-news {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    /* En columna, el flex-basis de 170px pasaría a ser alto */
    .runa-f26-news__field {
        flex: none;
    }

    .runa-f26__trust {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .runa-f26__trust-label {
        flex-basis: auto;
    }

    .runa-f26__badges,
    .runa-f26__paises {
        flex-wrap: wrap;
        gap: 12px 0;
    }

    .runa-f26__legal {
        white-space: normal;
    }

    .runa-f26__legal {
        flex-direction: column;
        align-items: flex-start;
    }
}