/* ==============================================
   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;
}

/* Bloque propio de una página (sin encabezado móvil): los títulos son más largos
   que los de 'pre', así que se parten en líneas y la imagen cede ancho al texto. */
.runa-f26-pre--texto .runa-f26-pre__cell {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
}

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

/* Encabezado único del bloque lila: solo en móvil (ver @media 767px). */
.runa-f26-pre__lead {
    display: none;
}

.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;
}

/* Solo la imagen de la primera celda se corre a la izquierda; la segunda queda en su sitio. */
.runa-f26-pre__lead + .runa-f26-pre__cell .runa-f26-pre__media {
    translate: -40px;
}

.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;
}

/* Campo blanco con el botón morado pegado a su borde derecho. */
.runa-f26-news__form {
    position: relative;
    margin: 0;
}

.runa-f26-news__input {
    display: block;
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    padding: 0 64px 0 16px;
    border: 0 !important;
    border-radius: var(--runa-radius-sm);
    background: #fff;
    color: var(--runa-ink);
    font-size: 14px;
}

.runa-f26-news__input::placeholder {
    color: #b5b3bf;
}

/* !important: el kit de Elementor estila button[type=submit] (borde morado, píldora, fondo transparente). */
.runa-f26-news .runa-f26-news__submit {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 2px 2px 0 !important;
    background: var(--runa-accent-theme) !important;
    color: #fff !important;
    cursor: pointer;
    transition: background-color var(--runa-t-color, 0.2s ease);
}

.runa-f26-news .runa-f26-news__submit:hover,
.runa-f26-news .runa-f26-news__submit:focus-visible {
    background: var(--runa-accent) !important;
}

.runa-f26-news .runa-f26-news__submit:disabled {
    opacity: 0.6;
    cursor: wait;
}

.runa-f26-news__msg {
    margin: 8px 0 0;
    font-size: 12px;
    color: #fff;
}

.runa-f26-news__msg:empty {
    display: none;
}

/* 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: -60px;
    bottom: 20px;
    width: 33%;
    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: flex-start;
    width: 80%;
}

/* 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;
}

/* 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;
}

/* Renglones como bloques (NitroPack quita <br>); en la descripción, solo en móvil. */
.runa-f26__tagline .runa-f26__linea {
    display: block;
}

/* 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;
}

/* Los SVG son cuadrados; contain evita deformarlos si cambia el arte. */
.runa-f26__badge-icon {
    display: block;
    width: 22px;
    height: 22px;
    object-fit: contain;
    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;
}

/* Acordeón de países: solo móvil (ver @media 767px). */
.runa-f26__acc {
    display: none;
}

/* ---------- 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) {
    /* Footer simplificado: bloque lila con un encabezado y los 2 botones lado a
       lado; marca, redes, newsletter, acordeón de países y legales. Sin mapa del
       sitio, sellos de seguridad ni decoración. */
    .runa-f26-pre__grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .runa-f26-pre__lead {
        display: block;
        grid-column: 1 / -1;
        margin-bottom: 8px;
    }

    .runa-f26-pre__lead-title {
        margin: 0 0 8px !important;
        font-size: 24px !important;
        font-weight: 700;
        line-height: 1.2;
        color: #fff;
    }

    .runa-f26-pre__lead-text {
        margin: 0 !important;
        font-size: 14px;
        line-height: 1.4;
        color: #fff;
    }

    /* Las celdas dejan de ser caja: el botón de cada CTA es un ítem del grid. */
    .runa-f26-pre__cell,
    .runa-f26-pre__copy {
        display: contents;
    }

    .runa-f26-pre__media,
    .runa-f26-pre__eyebrow,
    .runa-f26-pre__title,
    .runa-f26-pre__text {
        display: none;
    }

    /* Bloque propio: una CTA bajo la otra, con su título y texto, sin imagen. */
    .runa-f26-pre--texto .runa-f26-pre__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .runa-f26-pre--texto .runa-f26-pre__cell,
    .runa-f26-pre--texto .runa-f26-pre__copy,
    .runa-f26-pre--texto .runa-f26-pre__eyebrow,
    .runa-f26-pre--texto .runa-f26-pre__title,
    .runa-f26-pre--texto .runa-f26-pre__text {
        display: block;
    }

    /* Pill de móvil (DESIGN.md §8), a media columna */
    .runa-f26-btn {
        min-width: 0;
        width: 100%;
        padding: 16px 8px;
        font-size: 14px;
    }

    .runa-f26 {
        padding: 32px 16px;
    }

    .runa-f26__cols,
    .runa-f26__trust--paises {
        display: none;
    }

    .runa-f26__tagline {
        margin: 20px 0 12px !important;
        font-size: 28px;
    }

    .runa-f26__desc {
        margin: 0 0 20px !important;
    }

    .runa-f26__desc .runa-f26__linea {
        display: block;
    }

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

    /* Caja apilada: el texto arriba y el campo debajo, a todo el ancho. */
    .runa-f26-news {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 20px 16px;
    }

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

    /* Sin sellos de seguridad: los países van en el acordeón. */
    .runa-f26__trust {
        display: none;
    }

    .runa-f26__acc {
        display: block;
        margin-top: 24px;
        border-top: 1px solid rgba(255, 255, 255, 0.35);
        border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    }

    .runa-f26__acc-summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 0;
        font-size: 13px;
        cursor: pointer;
        list-style: none;
    }

    .runa-f26__acc-summary::-webkit-details-marker {
        display: none;
    }

    /* Chevrón: apunta a la derecha cerrado y hacia abajo abierto. */
    .runa-f26__acc-summary::after {
        content: "";
        width: 8px;
        height: 8px;
        border-right: 2px solid currentColor;
        border-top: 2px solid currentColor;
        transform: rotate(45deg);
        transition: transform var(--runa-t-color, 0.2s ease);
    }

    .runa-f26__acc[open] .runa-f26__acc-summary::after {
        transform: rotate(135deg);
    }

    /* .runa-f26 delante: `.runa-f26 ul` pone padding 0 y gana a la clase suelta. */
    .runa-f26 .runa-f26__acc-list {
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 0 0 16px;
        font-size: 13px;
    }

    .runa-f26__acc-list a {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    /* Banderas circulares; cover recorta la de Brasil, que es un SVG rectangular. */
    .runa-f26__flag {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
    }

    .runa-f26__legal {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-top: 20px;
        font-size: 10px;
        white-space: normal;
    }

    .runa-f26__legal ul {
        gap: 6px 0;
    }

    .runa-f26__legal li + li::before {
        margin: 0 6px;
    }

    .runa-f26__solo-escritorio {
        display: none;
    }
}