/* ==========================================================================
   Marketplace de instructores (/instruktorzy/)

   Hoja propia de la página: no se toca instructor-public.css, que también
   usan los perfiles. Misma identidad que el resto del sitio (azul #1C94F5,
   bordes #E5E7EB, radio 14–16px) y prefijo `mkt-` para no chocar con nada.
   ========================================================================== */

.mkt {
    padding: 2.5rem 0 3.5rem;
    background: #F8FAFC;
}

/* ---------- Cabecera ---------- */
.mkt-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 1.75rem;
    align-items: center;
    padding: 1.75rem 2rem;
    background: linear-gradient(135deg, #ffffff 0%, #F2F8FF 100%);
    border: 1px solid #E5E7EB;
    border-radius: 18px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

.mkt-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.75rem;
    margin-bottom: 0.85rem;
    border-radius: 999px;
    background: #E8F3FE;
    color: #0a7fd6;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mkt-title {
    margin: 0 0 0.6rem;
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #0a0a0a;
}

.mkt-lead {
    margin: 0;
    max-width: 60ch;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #4B5563;
}

.mkt-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mkt-hero-stats li {
    padding: 0.85rem 0.9rem;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    text-align: center;
}

.mkt-hero-stats strong {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    color: #0a0a0a;
}

.mkt-hero-stats span {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.75rem;
    line-height: 1.35;
    color: #6B7280;
}

/* ---------- Hero: sólo la foto ----------
   El hero ya no lleva texto encima (ni antetítulo, ni titular, ni entradilla,
   ni las tres cifras), así que es la imagen a sangre y SIN recortar: la foto
   marca su propio alto. `.mkt.mkt--banner` (dos clases) gana a `.mkt` aunque
   la regla móvil vaya después en el archivo. */
.mkt.mkt--banner {
    padding-top: 0;
}

.mkt-hero--banner {
    position: relative;
    display: block;
    padding: 0;
    background: #0B1B2B;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    line-height: 0;
}

/* Alto del hero con una proporción fija (3:1) para que el encuadre salga
   igual en cualquier pantalla. Se hace con un espaciador y no con
   `aspect-ratio` para que funcione también en navegadores antiguos. */
.mkt-hero--banner::after {
    content: "";
    display: block;
    padding-top: 33.3333%;
}

/* La foto ya no se enseña entera (era un hero enorme), pero se elige qué
   trozo se ve: `object-position` está puesto para que el hombre quede
   COMPLETO y sólo se recorte cielo por arriba y carrocería por abajo. */
.mkt-hero-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 58%;
}

/* En móvil, todavía más bajo (16:9) y algo más centrado en la persona. */
@media (max-width: 767.98px) {
    .mkt-hero--banner::after { padding-top: 56.25%; }
    .mkt-hero--banner .mkt-hero-img { object-position: 50% 55%; }
}

/* Titular sólo para Google y lectores de pantalla: ni se ve ni ocupa sitio. */
.mkt-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Filtros ---------- */
.mkt-filters {
    margin-top: 1.75rem;
    padding: 1.25rem 1.4rem 1.1rem;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

/* Filtros del buscador: sin cambios (buscador, ciudad, precio, orden y botón).
   Lo que se ha quitado es el oscurecido de la foto del hero, no esto. */
.mkt-filters-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)) auto;
    gap: 0.75rem;
    align-items: end;
}

.mkt-field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }

.mkt-field-label {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6B7280;
}

.mkt-input { position: relative; display: block; }
.mkt-input i {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9CA3AF;
    font-size: 0.85rem;
    pointer-events: none;
}

.mkt-field input[type="search"],
.mkt-field select {
    width: 100%;
    height: 44px;
    padding: 0 0.85rem;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9375rem;
    color: #111827;
    appearance: none;
}

.mkt-field input[type="search"] { padding-left: 2.35rem; }
.mkt-field select {
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236B7280'%3E%3Cpath d='M4.5 6.5 8 10l3.5-3.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
}

.mkt-field input[type="search"]:focus,
.mkt-field select:focus {
    outline: none;
    border-color: #1C94F5;
    box-shadow: 0 0 0 3px rgba(28, 148, 245, .15);
}

.mkt-submit {
    height: 44px;
    padding: 0 1.35rem;
    border: 0;
    border-radius: 10px;
    background: #1C94F5;
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.18s;
}
.mkt-submit:hover { background: #0a7fd6; }

/* Chips de categoría */
.mkt-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #F1F5F9;
}

.mkt-chips-label {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6B7280;
    margin-right: 0.15rem;
}

.mkt-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid #E5E7EB;
    border-radius: 999px;
    background: #F8FAFC;
    color: #374151;
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color 0.16s, background 0.16s, color 0.16s;
}
.mkt-chip:hover { border-color: #1C94F5; background: #fff; color: #0a7fd6; }
.mkt-chip.is-active { background: #1C94F5; border-color: #1C94F5; color: #fff; }
.mkt-chip-count {
    padding: 0 0.4rem;
    border-radius: 999px;
    background: rgba(28, 148, 245, .12);
    color: #0a7fd6;
    font-size: 0.6875rem;
}
.mkt-chip.is-active .mkt-chip-count { background: rgba(255, 255, 255, .25); color: #fff; }

.mkt-filters-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.9rem;
}

.mkt-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #374151;
    cursor: pointer;
}
.mkt-switch input { width: 18px; height: 18px; accent-color: #1C94F5; }

.mkt-clear {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #6B7280;
    text-decoration: none;
}
.mkt-clear:hover { color: #DC2626; }

/* ---------- Filtros puestos y recuento ---------- */
.mkt-results-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1.5rem 0 0.9rem;
}

.mkt-count { margin: 0; font-size: 0.9375rem; color: #6B7280; }
.mkt-count strong { color: #0a0a0a; }

.mkt-active {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.mkt-active a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: #E8F3FE;
    color: #0a7fd6;
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
}
.mkt-active a:hover { background: #d3e8fd; }

/* ---------- Tarjetas ---------- */
.mkt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mkt-card { display: flex; }

.mkt-card-link {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    width: 100%;
    padding: 1.15rem 1.25rem 1rem;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
.mkt-card-link:hover {
    border-color: #1C94F5;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -16px rgba(28, 148, 245, .5);
}

.mkt-card-main {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.mkt-card-photo {
    width: 96px;
    height: 96px;
    border-radius: 14px;
    overflow: hidden;
    background: #E8F3FE;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mkt-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mkt-card-initials {
    font-size: 1.7rem;
    font-weight: 800;
    color: #0a7fd6;
    letter-spacing: 0.02em;
}

.mkt-card-body { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }

.mkt-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; }

.mkt-card-name { font-size: 1.0625rem; font-weight: 800; color: #0a0a0a; }

.mkt-badges { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; }
.mkt-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.mkt-badge.is-top { background: #FEF3C7; border-color: #FDE68A; color: #92400E; }
.mkt-badge.is-popular { background: #E0EFFE; border-color: #CFE6FD; color: #0a7fd6; }
.mkt-badge.is-new { background: #D1FAE5; border-color: #A7F3D0; color: #047857; }
.mkt-badge.is-full { background: #F3F4F6; border-color: #E5E7EB; color: #6B7280; }
/* Antigüedad real en la plataforma: dato comprobable, no una opinión inventada. */
.mkt-badge.is-veteran { background: #EEF2FF; border-color: #DDD6FE; color: #4338CA; }

.mkt-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.9rem;
    font-size: 0.8125rem;
    color: #6B7280;
}
.mkt-card-meta i { color: #9CA3AF; margin-right: 0.25rem; }

.mkt-card-cats { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; }
.mkt-cat {
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    background: #F1F5F9;
    color: #334155;
    font-size: 0.75rem;
    font-weight: 800;
}

.mkt-card-bio {
    font-size: 0.8125rem;
    line-height: 1.55;
    color: #4B5563;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Franja inferior: prueba social a la izquierda, precio y CTA a la derecha.
   Antes el precio iba en una columna a la derecha y dejaba el texto en 200px. */
.mkt-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-top: 0.85rem;
    border-top: 1px solid #F1F5F9;
}

.mkt-card-proof {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.9rem;
    font-size: 0.8125rem;
    color: #6B7280;
}
.mkt-rating { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 800; color: #B45309; }
.mkt-rating i { color: #F59E0B; }
.mkt-rating-count { font-weight: 500; color: #6B7280; }
.mkt-rating--none { font-weight: 600; color: #9CA3AF; }
.mkt-students { display: inline-flex; align-items: center; gap: 0.3rem; }
.mkt-students i { color: #1C94F5; }

.mkt-card-side {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.mkt-price { display: flex; align-items: baseline; gap: 0.3rem; white-space: nowrap; }
.mkt-price strong { font-size: 1.2rem; font-weight: 800; color: #0a0a0a; }
.mkt-price span { font-size: 0.75rem; color: #6B7280; }
.mkt-price--none { font-size: 0.8125rem; color: #9CA3AF; font-weight: 600; }

.mkt-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    background: #E8F3FE;
    color: #0a7fd6;
    font-size: 0.8125rem;
    font-weight: 800;
    white-space: nowrap;
}
.mkt-card-link:hover .mkt-card-cta { background: #1C94F5; color: #fff; }

/* ---------- Estado vacío ---------- */
.mkt-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
    background: #fff;
    border: 1px dashed #CBD5E1;
    border-radius: 16px;
}
.mkt-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #E8F3FE;
    color: #1C94F5;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mkt-empty-title { margin: 0; font-size: 1.125rem; font-weight: 800; color: #0a0a0a; }
.mkt-empty-text { margin: 0; max-width: 52ch; font-size: 0.9375rem; line-height: 1.6; color: #6B7280; }
.mkt-empty-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 0.35rem; }

/* ---------- Botones y banda final ---------- */
.mkt-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.15rem;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    background: #fff;
    color: #0a0a0a;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color 0.16s, background 0.16s, color 0.16s;
}
.mkt-btn:hover { border-color: #1C94F5; color: #0a7fd6; }
.mkt-btn--primary { background: #1C94F5; border-color: #1C94F5; color: #fff; }
.mkt-btn--primary:hover { background: #0a7fd6; border-color: #0a7fd6; color: #fff; }
.mkt-btn--lg { padding: 0.8rem 1.4rem; font-size: 0.9375rem; }

.mkt-join {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-top: 2rem;
    padding: 1.6rem 1.75rem;
    border-radius: 18px;
    background: linear-gradient(135deg, #1C94F5 0%, #0a7fd6 100%);
    color: #fff;
}
.mkt-join-title { margin: 0 0 0.35rem; font-size: 1.15rem; font-weight: 800; }
.mkt-join-lead { margin: 0; max-width: 62ch; font-size: 0.875rem; line-height: 1.55; color: rgba(255, 255, 255, .9); }
.mkt-join .mkt-btn--primary { background: #fff; border-color: #fff; color: #0a7fd6; }
.mkt-join .mkt-btn--primary:hover { background: #F2F8FF; border-color: #F2F8FF; color: #0a7fd6; }

/* ---------- Adaptación ---------- */
@media (max-width: 1199.98px) {
    .mkt-filters-grid {
        grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
    }
    .mkt-submit { grid-column: 1 / -1; }
}

@media (max-width: 991.98px) {
    .mkt { padding: 1.75rem 0 2.5rem; }
    .mkt-hero { grid-template-columns: 1fr; padding: 1.4rem 1.25rem; }
    .mkt-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
    .mkt-filters-grid { grid-template-columns: 1fr; }
    .mkt-filters { padding: 1rem; }
    .mkt-card-link { padding: 1rem; }
    .mkt-card-main { grid-template-columns: 76px minmax(0, 1fr); gap: 0.85rem; }
    .mkt-card-photo { width: 76px; height: 76px; }
    .mkt-card-foot { align-items: flex-start; flex-direction: column; }
    .mkt-card-side { width: 100%; justify-content: space-between; }
    .mkt-join { padding: 1.25rem; }
}
/* ==========================================================================
   Solicitud de colaboración en el listado
   --------------------------------------------------------------------------
   La tarjeta pasa a tener una franja inferior con su acción. El formulario no
   puede ir dentro del enlace al perfil (sería un botón dentro de un enlace),
   así que la tarjeta es un contenedor y el enlace sólo cubre el contenido.
   ========================================================================== */
.mkt-card-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
    overflow: hidden;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.mkt-card-shell:hover {
    border-color: #1C94F5;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -16px rgba(28, 148, 245, .5);
}

/* El enlace ya no lleva el aspecto de tarjeta: lo lleva el contenedor */
.mkt-card-shell > .mkt-card-link,
.mkt-card-shell > .mkt-card-link:hover {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
}

.mkt-card-action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: auto;
    padding: .8rem 1.25rem;
    border-top: 1px solid #F1F5F9;
    background: #FCFDFF;
}
.mkt-card-action form { margin: 0; }

.mkt-request-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 44px;
    padding: .55rem 1.1rem;
    border: 1px solid #1C94F5;
    border-radius: 999px;
    background: #ffffff;
    color: #0a7fd6;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 800;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}
.mkt-request-btn:hover { background: #1C94F5; color: #ffffff; }

.mkt-card-action--note {
    justify-content: flex-start;
    background: #F5FAFF;
    color: #0a7fd6;
    font-size: .8125rem;
    font-weight: 700;
}
.mkt-card-action--note i { color: #1C94F5; }

@media (max-width: 575.98px) {
    .mkt-card-action { padding: .75rem 1rem; }
    .mkt-request-btn { width: 100%; }
}
/* ==========================================================================
   Ancho del contenido
   --------------------------------------------------------------------------
   La página usaba el contenedor a tope (1490px a 1600 de pantalla): las
   tarjetas quedaban a 40px del borde y no encajaba con el resto de la web, que
   contiene su contenido (pakiety: 920-1090px, panel: 1280px).

   Con 1280px el contenido respira igual que en las demás páginas y siguen
   entrando tres tarjetas por fila (bajando el mínimo de la rejilla de 420 a
   360px, que era lo que antes obligaba a que se vieran tan anchas).
   ========================================================================== */
.mkt .container-xxl {
    max-width: 1280px;
}

.mkt-grid {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}