/* Grid listing */
.mcv-grid { max-width:1200px;margin:0 auto;padding:20px; }
.mcv-grid .grid { display:grid; grid-template-columns: repeat(4,1fr); gap:20px; }
@media(max-width:992px){ .mcv-grid .grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:600px){ .mcv-grid .grid{grid-template-columns:repeat(1,1fr);} }
.mcv-card { position:relative; overflow:hidden; border-radius:8px; height:220px; display:flex; align-items:flex-end; text-decoration:none; color:inherit; transition:transform .25s; }
.mcv-card img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1); transition:transform .25s; filter: brightness(0.9); }
.mcv-card:hover img{ transform:scale(1.03); filter: brightness(1); }
.mcv-gradient{ position:absolute; left:0; right:0; bottom:0; height:60px; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%); display:flex; align-items:flex-end; padding:10px; }
.mcv-name{ color:#fff; font-weight:700; }
.mcv-noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#f0f0f0;color:#333;}
/* Single */
.mcv-single { max-width:1100px;margin:0 auto;padding:20px; font-family:Arial, sans-serif; color:#222; }
.mcv-single h1{ text-align:center; margin-bottom:20px;}
.mcv-layout{ display:grid; grid-template-columns: 360px 1fr; gap:24px; align-items:start; }
@media(max-width:900px){ .mcv-layout{ grid-template-columns: 1fr; } .mcv-layout img{ width:100%; height:auto; } }
.mcv-photo{ border-radius:8px; overflow:hidden; position:relative; }
.mcv-photo img{ width:100%; display:block; object-fit:cover; border-radius:8px; }
.mcv-data table{ width:100%; border-collapse:collapse; margin-bottom:16px; }
.mcv-data th{ text-align:left; padding:6px 8px; width:160px; color:#333; font-weight:600; }
.mcv-card-cert{ background:#fff; padding:12px; border-radius:8px; text-align:center; }
.mcv-cert-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-top:12px; }
.mcv-badge{ display:inline-block; padding:4px 8px; border-radius:4px; color:#fff; font-weight:600; font-size:12px; }
.mcv-badge.aprobado{ background:#28a745; }
.mcv-badge.pendiente{ background:#6c757d; }


/* ----------------------------------------------------------
   FICHA DEL MECÁNICO - ESTILOS RESPONSIVOS
---------------------------------------------------------- */

/* Título principal */
.mcv-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 25px;
}

/* Layout principal: Foto + Datos */
.mcv-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 32px;
}

@media (max-width: 768px) {
    .mcv-layout {
        grid-template-columns: 1fr;
    }
}

/* Foto */
.mcv-photo img {
    width: 100%;
    border-radius: 10px;
    object-fit: cover;
}

.mcv-no-photo {
    width: 100%;
    height: 280px;
    background:#f2f2f2;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:600;
}

/* Tabla de datos */
.mcv-table th {
    text-align:left;
    width:150px;
    padding:6px 0;
    color:#444;
    font-weight:600;
}

.mcv-table td {
    padding:6px 0;
    color:#222;
}

/* Biografía */
.mcv-bio {
    margin-top:18px;
    margin-bottom:20px;
}

/* Redes sociales */
.mcv-social {
    display:flex;
    gap:20px;
}

.mcv-social-icon {
    width:32px;
    height:32px;
    background-size:cover;
    display:inline-block;
}

/* Íconos SVG como background */
.mcv-facebook { background-image:url('https://b2bike.cl/wp-content/plugins/bmv-mecanicos_old/assets/icon/facebook.svg'); }
.mcv-instagram { background-image:url('https://b2bike.cl/wp-content/plugins/bmv-mecanicos_old/assets/icon/instagram.svg'); }
.mcv-linkedin { background-image:url('https://b2bike.cl/wp-content/plugins/bmv-mecanicos_old/assets/icon/linkedin.svg'); }
.mcv-tiktok { background-image:url('https://b2bike.cl/wp-content/plugins/bmv-mecanicos_old/assets/icon/tiktok.svg'); }

/* ----------------------------------------------------------
   CERTIFICACIONES
---------------------------------------------------------- */

.mcv-cert-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

@media (max-width: 900px) {
    .mcv-cert-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .mcv-cert-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

.mcv-cert-card {
    position:relative;
    padding:16px;
    border-radius:12px;
    background:white;
    text-align:center;
}

.mcv-cert-card img {
    width:auto;
    max-width:130px;
    max-height:110px;
    object-fit:contain;
    margin:auto;
}

/* Badge */
.mcv-cert-badge {
    position:absolute;
    top:10px;
    left:10px;
    padding:4px 8px;
    border-radius:6px;
    color:white;
    font-size:12px;
    font-weight:600;
}

/* Badges aprobados/pending */
.mcv-cert-ok .mcv-cert-badge {
    background:#4CAF50;
}

.mcv-cert-bad .mcv-cert-badge {
    background:#F44336;
}

/* Nombre certificación */
.mcv-cert-name {
    margin-top:10px;
    font-weight:600;
    color:#222;
}

/* ----------------------------------------------------------
   ESTILOS CARD V2 (GRID LISTING) - REFINADO
---------------------------------------------------------- */

.mcv-grid .grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    align-items: stretch; /* Asegura que todas las tarjetas en una fila tengan la misma altura */
}

@media(max-width: 1024px) { .mcv-grid .grid { grid-template-columns: repeat(3, 1fr); } }
@media(max-width: 768px) { .mcv-grid .grid { grid-template-columns: repeat(2, 1fr); } }
@media(max-width: 480px) { .mcv-grid .grid { grid-template-columns: repeat(1, 1fr); } }

.mcv-card-v2 {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: #333;
    background: #fff;
    border: 1px solid #e5e5e5; /* Borde gris claro por defecto */
    padding: 0; /* Quitamos el padding interno para que la imagen llegue a los bordes si se desea, o lo manejamos con margen */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    height: 100%;
    position: relative;
    box-sizing: border-box;
}

.mcv-card-v2:hover {
    border-color: #fdd835;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    transform: translateY(-5px);
}

.mcv-card-image {
    width: 100%;
    padding-top: 100%; /* Aspect ratio 1:1 (cuadrado) */
    position: relative;
    overflow: hidden;
    background: #f0f0f0;
}

.mcv-card-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Normaliza el tamaño de la imagen */
    filter: grayscale(100%);
    transition: filter 0.5s ease;
}

.mcv-card-v2:hover .mcv-card-image img {
    filter: grayscale(0%);
}

.mcv-card-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.mcv-card-name {
    margin: 0 0 12px 0;
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    color: #1a1a1a;
    line-height: 1.2;
    min-height: 2.4em; /* Reserva espacio para 2 líneas de nombre */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mcv-card-badge-container {
    display: flex;
    gap: 8px;
    align-items: start;
    margin-bottom: 15px;
}

.mcv-card-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fdd835;
    color: #000;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 900;
    border: 1px solid #000;
    text-transform: uppercase;
    height: 25px;
    box-sizing: border-box;
}

.mcv-card-clicmecanica-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #ffffff;
    color: #000;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 900;
    border: 1px solid #000;
    text-transform: uppercase;
    text-decoration: none;
    height: 25px;
    box-sizing: border-box;
    transition: background-color 0.3s ease;
}

.mcv-card-clicmecanica-badge:hover {
    background: #f5f5f5;
}

.mcv-card-clicmecanica-badge img {
    width: 14px;
    height: 14px;
    object-fit: cover;
    object-position: left;
    display: block;
}

.mcv-card-meta {
    font-size: 13px;
    color: #888;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    font-weight: 600;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.mcv-card-v2:hover .mcv-card-meta {
    color: #555;
}

.mcv-icon {
    margin-right: 10px;
    font-size: 16px;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s ease;
}

.mcv-card-v2:hover .mcv-icon {
    filter: grayscale(0%);
    opacity: 1;
}

.mcv-card-divider {
    height: 1px;
    background: #f2f2f2;
    margin: 15px 0;
}

.mcv-card-link {
    font-size: 13px;
    font-weight: 800;
    color: #cccccc; /* Gris muy claro por defecto */
    display: flex;
    align-items: center;
    text-transform: uppercase;
    margin-top: auto; /* Empuja el link al final de la tarjeta */
    transition: color 0.3s ease;
}

.mcv-card-v2:hover .mcv-card-link {
    color: #fdd835; /* Amarillo al hover */
}

.mcv-arrow {
    margin-left: 10px;
    font-size: 20px;
    transition: transform 0.3s ease;
}

.mcv-card-v2:hover .mcv-arrow {
    transform: translateX(5px);
}

.mcv-main-title {
    text-align: center;
    font-size: 36px;
    font-weight: 800;
    color: #002244;
    margin-bottom: 40px;
    text-transform: uppercase;
}

.mcv-no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 50px;
    background: #f9f9f9;
    border-radius: 8px;
    color: #666;
    font-size: 18px;
}