/*
 * bloques/tarjetas-icono/estilos.css
 * El nº de columnas y los colores salen inline del template, porque dependen
 * de la instancia. Aquí, la tarjeta y su tipografía.
 */

.bl-tarjetas-icono { padding: var(--bl-aire) 0; }

.bl-tarjetas-icono .bl-ti-antetitulo {
    text-align: center;
    margin: 0 0 10px;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .7;
}

.bl-tarjetas-icono .bl-ti-titulo {
    text-align: center;
    font-size: clamp(26px, 2.6vw, 38px);
    line-height: 1.3;
    font-weight: 300;
    margin: 0 0 12px;
    text-wrap: balance;
}

.bl-tarjetas-icono .bl-ti-texto {
    text-align: center;
    max-width: 52ch;
    margin: 0 auto clamp(32px, 3.5vw, 56px);
    font-size: 16px;
    line-height: 1.5;
    opacity: .8;
}

.bl-tarjetas-icono .bl-ti-grid { display: grid; }

/* Tarjetas separadas: cada una con su borde y su radio. */
.bl-tarjetas-icono .bl-ti-grid.es-tarjeta { gap: clamp(20px, 2.2vw, 36px); }
.bl-tarjetas-icono .es-tarjeta .bl-ti-tarjeta {
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 20px;
    padding: clamp(24px, 2.4vw, 34px);
}

/*
 * Rejilla: un panel con esquinas redondeadas y filetes SOLO interiores.
 *
 * En vez de poner bordes a cada celda —que obliga a quitarlos en la ultima fila
 * y la ultima columna, y el numero de columnas es variable— el contenedor lleva
 * el color del filete de fondo y las celdas se separan con un hueco de 1px. Lo
 * que se ve por esos huecos es el fondo del contenedor: divisiones perfectas,
 * sin borde exterior y sin depender de cuantas columnas haya.
 */
.bl-tarjetas-icono .bl-ti-grid.es-rejilla {
    gap: 1px;
    background: rgba(0, 0, 0, .08);
    border-radius: 20px;
    overflow: hidden;
}
.bl-tarjetas-icono .es-rejilla .bl-ti-tarjeta {
    border: 0;
    border-radius: 0;
    padding: clamp(26px, 2.4vw, 34px);
}

.bl-tarjetas-icono .bl-ti-tarjeta { min-width: 0; }

/* La destacada va a color pleno, sin borde. */
.bl-tarjetas-icono .bl-ti-tarjeta.es-destacada { border-color: transparent; }

/* El cuadrado redondeado del icono. */
.bl-tarjetas-icono .bl-ti-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(44px, 3.4vw, 54px);
    height: clamp(44px, 3.4vw, 54px);
    border-radius: 14px;
    margin-bottom: clamp(20px, 2vw, 30px);
}
.bl-tarjetas-icono .bl-ti-icono svg { width: 45%; height: 45%; display: block; }

.bl-tarjetas-icono .bl-ti-tarjeta-titulo {
    font-size: clamp(17px, 1.3vw, 20px);
    line-height: 1.35;
    font-weight: 600;
    margin: 0 0 12px;
    text-wrap: balance;
}

.bl-tarjetas-icono .bl-ti-tarjeta-texto {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    opacity: .8;
}

@media (max-width: 620px) {
    .bl-tarjetas-icono .bl-ti-titulo { font-size: 24px; }
    .bl-tarjetas-icono .bl-ti-texto { margin-bottom: 28px; }
}