/* ============================================================
 *  Carrusel público de Expertos — María Linda
 *  Estilo: foto cuadrada + placa café claro (nombre + CP)
 *  Independiente de Elementor. Colores editables abajo.
 * ============================================================ */
.mlx-wrap{
    /* --- variables editables --- */
    --mlx-teal:#7BC6BB;          /* color del título */
    --mlx-plate:#C2B49A;         /* placa café claro bajo la foto */
    --mlx-radius:22px;           /* redondeo (esquinas superiores) */
    --mlx-gap:44px;              /* separación entre cards (más gap = cards un poco más chicas) */
    --mlx-arrow:#8a8272;         /* color de las flechas (más oscuro) */

    font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    max-width:1200px;
    margin:2.5rem auto;
    position:relative;
    padding:0 44px;              /* espacio para las flechas laterales */
    box-sizing:border-box;
}

.mlx-title{
    text-align:center;
    color:var(--mlx-teal);
    font-family:"Plus Jakarta Sans",sans-serif;
    font-weight:700;
    font-size:clamp(1.4rem,3.4vw,2.1rem);
    line-height:1.2;
    margin:0 0 2rem;
}

.mlx-viewport{ overflow:hidden; }

.mlx-track{
    display:flex;
    gap:var(--mlx-gap);
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;              /* Firefox */
    padding-bottom:4px;
}
.mlx-track::-webkit-scrollbar{ display:none; }

/* Cuando TODO cabe (1-2 cards, o caben sin scroll): centrado estático, sin carrusel */
.mlx-track.mlx-centered{
    justify-content:center;
    scroll-snap-type:none;
    overflow-x:visible;
    flex-wrap:wrap;
}

.mlx-card{
    flex:0 0 calc((100% - 2*var(--mlx-gap)) / 3);   /* 3 por vista en desktop */
    max-width:360px;
    scroll-snap-align:start;
    box-sizing:border-box;
}

/* Foto cuadrada, esquinas superiores redondeadas */
.mlx-photo{
    border-radius:var(--mlx-radius) var(--mlx-radius) 0 0;
    overflow:hidden;
    line-height:0;
}
.mlx-photo img{
    width:100%;
    aspect-ratio:1 / 1;
    object-fit:cover;
    object-position:center top;   /* centrada y anclada arriba: fotos más altas muestran la parte superior */
    display:block;
}

/* Placa café claro "unida" a la imagen */
.mlx-plate{
    margin-top:-20px;             /* pequeño solape para el efecto "unido" */
    position:relative;
    background:var(--mlx-plate);
    border-radius:var(--mlx-radius);   /* mismo redondeo en las 4 esquinas */
    padding:44px 18px 30px;       /* más aire arriba y abajo (top compensa el solape) */
    text-align:center;
}
.mlx-name{
    font-family:"Plus Jakarta Sans",sans-serif;
    font-weight:700;
    color:#ffffff;
    font-size:1.35rem;
    line-height:1.2;
    /* !important: el tema mete margin-bottom al <p> y separa nombre/CP */
    margin:0 !important;
}
.mlx-cp{
    font-family:"Plus Jakarta Sans",sans-serif;
    font-weight:400;
    color:rgba(255,255,255,.9);
    font-size:.95rem;
    letter-spacing:.02em;
    line-height:1.2;
    margin:10px 0 0 !important;   /* ~10px entre nombre y CP */
}

/* Puntos de progreso (desktop y móvil, solo si hay carrusel) */
.mlx-dots{ display:none; }
.mlx-wrap:not(.mlx-no-nav) .mlx-dots{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    margin-top:20px;
}
.mlx-dot{
    width:8px;
    height:8px;
    padding:0;
    border:none;
    border-radius:99px;
    background:rgba(123,198,187,.35);
    cursor:pointer;
    transition:width .38s cubic-bezier(.25,.8,.25,1),
               background-color .38s ease;
}
.mlx-dot.is-active{
    width:26px;
    background:var(--mlx-teal);   /* el punto activo se alarga en pill */
}

/* Flechas laterales: chevron fino (mismo estilo que los otros carruseles de la página) */
.mlx-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:34px;
    height:60px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:none !important;
    border:none;
    cursor:pointer;
    color:var(--mlx-arrow);
    transition:color .2s ease,opacity .2s ease;
    z-index:3;
    padding:0;
}
.mlx-chev{
    width:26px;
    height:26px;
    fill:none;
    stroke:currentColor;
    stroke-width:3;              /* chevron más grueso/negrito */
    stroke-linecap:round;
    stroke-linejoin:round;
}
/* nunca fondo (ni en hover/focus); solo se oscurece el chevron */
.mlx-arrow:hover,
.mlx-arrow:focus,
.mlx-arrow:active{
    background:none !important;
    box-shadow:none !important;
    outline:none;
}
.mlx-arrow:hover{ color:#5c564a; }
.mlx-arrow[disabled]{ opacity:.25; cursor:default; }
.mlx-arrow.mlx-prev{ left:2px; }
.mlx-arrow.mlx-next{ right:2px; }

/* Sin navegación (todo centrado): ocultar flechas */
.mlx-wrap.mlx-no-nav .mlx-arrow{ display:none; }

/* Tablet: 2 por vista */
@media (max-width:900px){
    .mlx-card{ flex-basis:calc((100% - var(--mlx-gap)) / 2); }
}

/* Móvil: swipe — 1 card visible con asomo de la siguiente, sin flechas */
@media (max-width:600px){
    .mlx-wrap{ padding:0 12px; margin:1.2rem auto 0.6rem; } /* menos espacio abajo */
    .mlx-card{ flex-basis:100%; max-width:none; }          /* una card completa, SIN asomo de la siguiente */
    .mlx-arrow{ display:none; }
    .mlx-track.mlx-centered .mlx-card{ flex-basis:100%; }
    .mlx-name{ font-size:1.3rem; }                        /* nombre en móvil (un poco más chico) */
    .mlx-wrap:not(.mlx-no-nav) .mlx-dots{ margin-top:16px; }
}