/* Estilo de tarjeta 4 "Rectangular" (diseño y animación "Card rectangular", claude.ai/design).
   - En reposo: la foto ocupa toda la tarjeta y una franja con el nombre, alineado a la izquierda,
     queda abajo, con 16px de margen a los lados y a 35px del borde inferior (tarjeta de 378 x 282).
   - Al pasar el mouse (o con el foco del teclado): la franja crece hasta cubrir la tarjeta con 16px
     de margen, se vuelve 85% opaca, el nombre se centra y crece, y aparece el botón.
   - Colores: la franja es el "Color de la tarjeta" (--categoryCardBgColor); este estilo no usa el
     "Relleno". Detrás de la foto la tarjeta es blanca, como en el diseño. El nombre usa su color de
     siempre y el botón el de "Botones" de la sección. */
.carta__card{
    --card-rectangular-ease: cubic-bezier(.22, 1, .36, 1);
    --card-rectangular-duration: 450ms;
    --card-rectangular-fill: var(--categoryCardBgColor);
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: 378 / 282;
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
    background-color: #FFFFFF;
    min-width: var(--category-card-min-width, 250px);
}

.carta__card img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* La franja: 16px de margen a los lados (el mismo de cuando crece) y 55px de alto. */
.carta__card .carta__nombre{
    position: absolute;
    z-index: 2;
    left: 16px;
    bottom: 12.4%;
    width: calc(100% - 32px);
    height: 55px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 14px;
    border-radius: 0;
    background-color: var(--card-rectangular-fill);
    transition: all var(--card-rectangular-duration) var(--card-rectangular-ease);
}

.carta__card .carta__informative{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* El nombre: dos espaciadores invisibles a los lados. En reposo el de la izquierda no crece (nombre
   a la izquierda); al pasar el mouse crece igual que el de la derecha y el nombre se desliza al
   centro. */
.carta__card .carta__informative .carta__card-name{
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    color: var(--category-card-txt-color, #212121);
    background-color: transparent;
    transition: font-size var(--card-rectangular-duration) var(--card-rectangular-ease);
}

.carta__card .carta__informative .carta__card-name::before,
.carta__card .carta__informative .carta__card-name::after{
    content: '';
    flex: 0 0 0;
    transition: flex-grow var(--card-rectangular-duration) var(--card-rectangular-ease);
}

.carta__card .carta__informative .carta__card-name::after{
    flex-grow: 1;
}

/* El botón, escondido en reposo: sin alto, sin aire y transparente. Al irse el mouse se apaga
   rápido (30% de la duración) mientras se cierra. */
.carta__card .carta__informative .button--build{
    max-height: 0;
    min-height: 0;
    margin-top: 0;
    padding: 0 26px;
    border-width: 0;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    line-height: 19px;
    opacity: 0;
    visibility: hidden;
    transition:
        max-height var(--card-rectangular-duration) var(--card-rectangular-ease),
        margin-top var(--card-rectangular-duration) var(--card-rectangular-ease),
        padding var(--card-rectangular-duration) var(--card-rectangular-ease),
        opacity calc(var(--card-rectangular-duration) * .3) ease,
        visibility 0s linear var(--card-rectangular-duration),
        transform .2s ease;
}

/* Crece hacia arriba: el ancho y los márgenes laterales ya son los de reposo. */
.carta__card:hover .carta__nombre,
.carta__card:focus-within .carta__nombre{
    bottom: 16px;
    height: calc(100% - 32px);
    border-radius: 4px;
    background-color: color-mix(in srgb, var(--card-rectangular-fill) 85%, transparent);
}

.carta__card:hover .carta__informative .carta__card-name,
.carta__card:focus-within .carta__informative .carta__card-name{
    font-size: 30px;
}

.carta__card:hover .carta__informative .carta__card-name::before,
.carta__card:focus-within .carta__informative .carta__card-name::before{
    flex-grow: 1;
}

/* Al entrar, el botón se abre con la franja y aparece en el último 60% de la animación. */
.carta__card:hover .carta__informative .button--build,
.carta__card:focus-within .carta__informative .button--build{
    max-height: 60px;
    margin-top: 18px;
    padding: 12px 26px;
    border-width: 1px;
    opacity: 1;
    visibility: visible;
    transition:
        max-height var(--card-rectangular-duration) var(--card-rectangular-ease),
        margin-top var(--card-rectangular-duration) var(--card-rectangular-ease),
        padding var(--card-rectangular-duration) var(--card-rectangular-ease),
        opacity calc(var(--card-rectangular-duration) * .6) ease calc(var(--card-rectangular-duration) * .4),
        visibility 0s,
        transform .2s ease;
}

.carta__card .carta__informative .button--build:hover{
    transform: translateY(-2px);
}

.carta__card .carta__informative .button--build:active{
    transform: translateY(0) scale(.97);
}

@media screen and (min-width: 600px){
    .carta__card{
        width: var(--category-card-width, 48%);
    }
}

@media screen and (min-width: 905px){
    .carta__card{
        width: var(--category-card-width, 30%);
    }
}