/* ============================================ */
/* CSS: Componente t-card con prefijo "t-"      */
/* ============================================ */

:root {
    /* Paleta */
    --t-color-primary: #1a1a2e;
    --t-color-text:    #2d2d3a;
    --t-color-white:   #ffffff;
    --t-color-border:  rgba(26, 26, 46, 0.18);

    /* Overlay */
    --t-overlay:       rgb(203 185 116 / 73%);;
    --t-overlay-hover: rgba(255, 255, 255, 0.397);

    /* Tipografía & Iconos */
    --t-font:          'Inter', system-ui, -apple-system, sans-serif;
    --t-font-size-md:  1rem;
    --t-icon-size:     1.1rem;

    /* Dimensiones */
    --t-radius:        12px;
    --t-radius-sm:     8px;
    --t-gap:           0.5rem;
    --t-padding:       1rem;

    /* Animaciones */
    --t-ease:          cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --t-duration:      0.4s;
}

/* ---------- Estructura ---------- */
.t-card {
    position: relative;
    width: 100%;
    height: 346px;
    border-radius: var(--t-radius);
    overflow: hidden; /* Mantiene el zoom dentro del contorno */
}

.t-card__bg {
    position: absolute;
    inset: 0;
    background-image: var(--t-bg-img);
    background-size: cover;
    background-position: center;
    transition: transform var(--t-duration) var(--t-ease);
    will-change: transform; /* Optimiza renderizado del hover */
}

.t-card__overlay {
    position: absolute;
    inset: 0;
    background: var(--t-overlay);
    transition: background var(--t-duration) var(--t-ease);
}

.t-card__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--t-gap);
    padding: var(--t-padding);
    height: 100%;
    justify-content: flex-end;
    box-sizing: border-box;
}

/* ---------- Hover en imagen ---------- */
.t-card:hover .t-card__bg {
    transform: scale(1.08); /* Ampliación sutil sin desbordar */
}

.t-card:hover .t-card__overlay {
    background: var(--t-overlay-hover);
}

/* ---------- Botones ---------- */
.t-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 1rem;
    border: 1px solid var(--t-color-border);
    border-radius: var(--t-radius-sm);
    background: var(--t-color-white);
    color: var(--t-color-text);
    font-family: var(--t-font);
    font-size: var(--t-font-size-md);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s var(--t-ease);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.t-btn i {
    font-size: var(--t-icon-size);
    transition: color 0.25s var(--t-ease);
}

.t-btn:hover {
    background: var(--t-color-primary);
    color: var(--t-color-white);
    border-color: var(--t-color-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(26, 26, 46, 0.18);
}

.t-btn:active {
    transform: translateY(0);
}

.section-brand{
    margin: 0 auto;
}

.section-brand img{
    width: 10rem;
}

.section-sub{
    text-align: center;    
}