/*
 * bloques/multicolumna/estilos.css
 * El grid se monta inline desde el template (los nº de columnas, gap
 * y alineación dependen de la instancia). Aquí solo tipografía y
 * espaciado mínimo del contenido.
 */

.bl-multicolumna .bl-col-titulo {
    font-size: 1.25rem;
    line-height: 1.3;
    margin: 12px 0 6px;
}

.bl-multicolumna .bl-col-texto {
    color: inherit;
}

.bl-multicolumna .bl-col-texto p { margin: 0 0 .8em; line-height: 1.2; }

.bl-multicolumna .bl-col-texto a:not(.boton, .enlace-accion) {
    color: var(--bl-color-primario, #262524);
    text-decoration: underline;
}

.bl-multicolumna .boton {
    margin-top: 8px;
    display: inline-flex;   /* como cualquier .boton: con inline-block no sale la flecha */
}

/*
 * Wrapper de las columnas. El bloque (section) es siempre 100% de ancho;
 * este wrapper decide si las columnas van centradas (.bl-contenedor) o
 * a ancho completo (.bl-fluido). Cuando están centradas y tienen color
 * propio, se le da un padding/redondeo para que el color sea una "caja".
 */
.bl-multicolumna .bl-mc-coloreado {
    padding-top: 40px;
    padding-bottom: 40px;
    border-radius: 0;
}

/* Antetítulo de cada columna (01 · Estudio SEO local). */
.bl-multicolumna .bl-col-antetitulo { margin: 0 0 14px; color: var(--vk-texto, #262524); }

/* Etiquetas en píldoras bajo el texto («Qué trabajamos»). */
.bl-multicolumna .bl-col-etiquetas { margin-top: clamp(22px, 2.4vw, 32px); padding-top: clamp(20px, 2.2vw, 28px); border-top: 1px solid var(--vk-linea, rgba(38, 37, 36, .14)); }
.bl-multicolumna .bl-col-etiquetas-titulo { margin: 0 0 12px; }
.bl-col-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.bl-col-chips li { padding: 6px 14px; border: 1px solid var(--vk-oscuro, #262524); border-radius: 999px; font-size: 15px; line-height: 1.3; color: var(--vk-texto, #262524); }

/* ── Estilo «tarjetas» ─────────────────────────────────────────────────
   Cada columna en una caja con borde fino y esquinas redondeadas, un punto
   más clara que el fondo. Las tarjetas de una fila miden lo mismo y las
   etiquetas van abajo del todo, así sus filetes quedan a la misma altura
   cuando el texto ocupa parecido. */
.bl-mc--tarjetas .bl-col {
    display: flex;
    flex-direction: column;
    padding: clamp(24px, 3.2vw, 44px);
    border: 1px solid var(--vk-linea, rgba(38, 37, 36, .14));
    border-radius: 8px;
    background: rgba(255, 255, 255, .4);
}
.bl-mc--tarjetas .bl-col-titulo {
    margin: 0 0 clamp(14px, 1.6vw, 20px);
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.015em;
    text-wrap: balance;
}
.bl-mc--tarjetas .bl-col-texto { font-size: 17px; line-height: 1.55; color: var(--vk-texto-2, #5f5c58); }
.bl-mc--tarjetas .bl-col-texto p { line-height: inherit; margin: 0 0 1em; }
.bl-mc--tarjetas .bl-col-texto > :last-child { margin-bottom: 0; }
/* Las etiquetas, abajo del todo; el hueco mínimo lo pone el margen del texto. */
.bl-mc--tarjetas .bl-col-texto { margin-bottom: clamp(22px, 2.4vw, 32px); }
.bl-mc--tarjetas .bl-col-etiquetas { margin-top: auto; }

/* ── Estilo «banda» ────────────────────────────────────────────────────
   Las columnas dentro de una caja gris oscura con las esquinas redondeadas
   (la misma que la caja de «puntos»), centradas en vertical. Pensado para
   una llamada a la acción: frase grande en la primera columna —con
   «Resaltado», en amarillo— y el botón en la última, a la derecha. */
.bl-mc--banda .bl-grid {
    align-items: center;
    padding: clamp(28px, 5vw, 72px) clamp(22px, 5vw, 64px);
    border-radius: 10px;
}
.bl-mc--banda .bl-col-texto { font-size: clamp(20px, 2.8vw, 28px); font-weight: 500; line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
.bl-mc--banda .bl-col-texto p { margin: 0 0 .4em; line-height: inherit; }
.bl-mc--banda .bl-col-texto > :last-child { margin-bottom: 0; }
.bl-mc--banda .bl-col > p:last-child { margin: 0; }
.bl-mc--banda .boton { display: inline-flex; margin-top: 0; min-height: 56px; padding-inline: 26px; text-align: left; }
@media (min-width: 768px) {
    /* La última columna (la del botón) se pega a la derecha. */
    .bl-mc--banda .bl-col:last-child:not(:first-child) { justify-self: end; }
}