/* --- MÉTODOS DE CAFÉ (Blindado) --- */
.pf-met-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 80px 20px;
    flex-wrap: wrap;
    max-width: 1100px;
    margin: 0 auto;
}

.pf-met-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    width: 285px;
    transition: all 0.5s ease;
    z-index: 1;
}

.pf-met-img-wrapper {
    position: relative;
    width: 100%;
    padding: 10px;
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 5px 10px 25px rgba(0,0,0,0.08);
    border-radius: 4px;
    transition: all 0.4s ease;
}

.pf-met-img-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    filter: grayscale(10%);
}

.pf-met-btn {
    position: absolute;
    width: 35px;
    height: 35px;
    background: #bc9c7e;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
    z-index: 5;
}

/* Rotaciones Específicas */
.pf-met-french { transform: rotate(-8deg); margin-right: -15px; }
.pf-met-moka   { transform: rotate(5deg);  margin-top: 30px; }
.pf-met-v60    { transform: rotate(-3deg); margin-left: -10px; }
.pf-met-chemex { transform: rotate(10deg); margin-top: -20px; }

/* Posiciones de botones */
.pf-met-french .pf-met-btn { top: -10px; left: -10px; }
.pf-met-moka .pf-met-btn { bottom: -10px; left: -10px; }
.pf-met-v60 .pf-met-btn { top: 50%; right: -15px; transform: translateY(-50%); }
.pf-met-chemex .pf-met-btn { bottom: -10px; right: -10px; }

.pf-met-title {
    margin-top: 25px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #5a3e2b;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-align: center;
}

/* Hovers */
.pf-met-item:hover { z-index: 10; transform: scale(1.08) rotate(0deg); }
.pf-met-item:hover .pf-met-btn { background: #5a3e2b; transform: scale(1.2); }
.pf-met-v60:hover .pf-met-btn { transform: translateY(-50%) scale(1.2); }

@media (max-width: 767px) {
    .pf-met-container { flex-direction: column; gap: 80px; overflow-x: hidden; }
    .pf-met-item { width: 100%; max-width: 260px; margin: 0 auto !important; }
    .pf-met-french { transform: rotate(-5deg); }
    .pf-met-moka   { transform: rotate(4deg); margin-top: 0 !important; }
    .pf-met-v60    { transform: rotate(-3deg); }
    .pf-met-chemex { transform: rotate(6deg); margin-top: 0 !important; }
}