/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
/* =========================
   ATENCIÓN - UI EPIC LEVEL
========================= */

#page-atencion {
    background: #ffffff;
}

/* =========================
   CARD BASE - VIDA + PROFUNDIDAD
========================= */

.card-atencion {
    position: relative;
    overflow: hidden;

    border-radius: 20px;

    background: #fff;

    border: 1px solid rgba(0,0,0,0.06);

    box-shadow: 0 6px 18px rgba(0,0,0,0.08);

    cursor: pointer;

    opacity: 0;
    transform: translateY(40px) scale(0.98);

    transition:
        transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 0.6s ease,
        box-shadow 0.4s ease;
}

/* =========================
   ENTRADA (VISIBLE)
========================= */

.card-atencion.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* =========================
   HOVER EPIC (SIN ROMPER LAYOUT)
========================= */

.card-atencion:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 55px rgba(0,0,0,0.18);
}

/* =========================
   SHINE EFFECT (LUZ QUE CRUZA)
========================= */

.card-atencion::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;

    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.35),
        transparent
        );

    transform: skewX(-20deg);
}

.card-atencion:hover::before {
    animation: shine 1s ease;
}

@keyframes shine {
    0% { left: -120%; }
    100% { left: 140%; }
}

/* =========================
   BARRA LATERAL ENERGÉTICA
========================= */
.card-atencion {
    border: 1.5px solid rgba(104, 168, 131, 0.25);
}

/* hover más pro */
.card-atencion:hover {
    border-color: rgba(104, 168, 131, 1);

    box-shadow:
        0 0 0 2px rgba(104,168,131,0.25),
        0 25px 55px rgba(0,0,0,0.18);
}

/* =========================
   IMAGEN CINEMÁTICA
========================= */

.card-atencion .img-atencion {
    width: 100%;
    height: 175px;
    object-fit: cover;

    transition: transform 0.7s ease, filter 0.5s ease;
}

.card-atencion:hover .img-atencion {
    transform: scale(1.08);
    filter: brightness(0.85) saturate(1.2);
}

/* =========================
   CONTENIDO
========================= */

.card-atencion .card-body {
    padding: 14px 16px 6px 16px;
}

.card-atencion h5 {
    font-size: 15px;
    font-weight: 800;
    color: #1a1a1a;
}

.card-atencion p {
    font-size: 13px;
    color: #666;
}

/* BADGE 24/7 */

.badge.blink {
    position: relative;

    display: inline-flex;
    align-items: center;

    padding: 6px 12px;

    font-size: 15px;
    font-weight: 900;

    color: #fff;

    background: linear-gradient(135deg, #ff3b3b, #ff6b6b);

    border-radius: 999px;

    box-shadow:
        0 10px 25px rgba(255,59,59,0.35),
        0 0 0 4px rgba(255,59,59,0.08);

    animation: pulseEpic 1.5s infinite;
}

/* glow vivo */
.badge.blink::after {
    content: "";
    position: absolute;
    inset: -4px;

    border-radius: 999px;

    background: rgba(255,59,59,0.25);
    filter: blur(10px);

    z-index: -1;
}

@keyframes pulseEpic {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* =========================
   BOTÓN
========================= */

.card-atencion .card-footer {
    background: transparent;
    border: none;
    padding: 12px 16px 16px 16px;
}

.card-atencion .card-footer a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 8px 16px;

    border-radius: 999px;

    font-size: 12.5px;
    font-weight: 700;

    color: #fff;
    text-decoration: none;

    background: linear-gradient(135deg, #68A883, #3f7d61);

    box-shadow: 0 10px 20px rgba(104,168,131,0.25);

    transition: all 0.3s ease;
}

.card-atencion .card-footer a:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 35px rgba(104,168,131,0.4);
}

/* =========================
   FLOAT SUBTLE (VIDA EN LA CARD)
========================= */

.card-atencion.visible {
    animation: floatIn 0.8s ease forwards;
}

@keyframes floatIn {
    0% { transform: translateY(40px) scale(0.98); }
    60% { transform: translateY(-5px) scale(1.01); }
    100% { transform: translateY(0) scale(1); }
}