/* src/main/resources/static/css/valor.css */

/* Estilos generales para la página que usa las tarjetas de valor */
.valor-body {
    background-color: #f8f9fa;
}

/* Cabecera de la página (si se usa) */
.valor-page-header {
    background: linear-gradient(135deg, #00b8b0, #008c86);
    color: white;
    padding: 4rem 0;
    margin-bottom: 4rem;
    border-radius: 0 0 50px 50px;
}

/* Títulos de sección */
.valor-section-title {
    color: #2c3e50;
    font-weight: 750;
    margin-bottom: 3rem;
    position: relative;
    padding-bottom: 1rem;
}

.valor-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: #00b8b0;
    border-radius: 2px;
}

/* Estilo para las tarjetas de iconos - versión cuadrada con outline */
.valor-icon-card {
    background: white;
    border: 2px solid #0718A8;      /* outline azul oscuro */
    border-radius: 0;                /* cuadrada */
    padding: 2rem;
    height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #0718A8;                  /* texto azul oscuro por defecto */
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: none;                 /* sin sombra */
    position: relative;
    overflow: hidden;
}

.valor-icon-card i {
    font-size: 5rem;
    margin-bottom: 1.5rem;
    color: #0718A8;                  /* icono azul oscuro */
    transition: color 0.3s ease;
}

.valor-icon-card h3 {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #0718A8;                  /* texto azul oscuro */
    transition: color 0.3s ease;
}

.valor-icon-card p {
    color: #0718A8;                   /* párrafo azul oscuro */
    transition: color 0.3s ease;
    margin-bottom: 0;
}

/* Efecto hover: fondo azul más claro, texto blanco */
.valor-icon-card:hover {
    background: #2133C2;
    border-color: #2133C2;            /* opcional: borde del mismo color */
}

.valor-icon-card:hover i,
.valor-icon-card:hover h3,
.valor-icon-card:hover p {
    color: white;
}

/* Eliminamos los estilos de hover-text que ya no se usan */
.valor-icon-card .valor-hover-text {
    display: none;
}

.valor-icon-card i {
    font-size: 3.5rem;        /* Aprox 1cm en pantalla (puedes ajustar) */
    margin-bottom: 1rem;
    color: #0718A8;            /* Color inicial azul */
    transition: color 0.3s ease;
}

.valor-icon-card:hover i {
    color: #ffffff;            /* Se vuelve blanco al hover */
}