/* ─────────────────────────────────────────────────────────────────────────────
   MEGA MENÚ TRATAMIENTOS  v1.1
   Clínica Premium  –  colores y layout extraídos de los diseños
   ─────────────────────────────────────────────────────────────────────────────

   PERSONALIZACIÓN RÁPIDA
   Pega esto en Elementor → Ajustes del sitio → CSS personalizado:

   .mm-nav {
       --mm-blue:     #TU_COLOR_PRINCIPAL;
       --mm-navy:     #TU_COLOR_OSCURO;
       --mm-todos-bg: #TU_COLOR_BOTON;
   }
   ───────────────────────────────────────────────────────────────────────────── */

.mm-nav {
    /* ── Colores ── */
    --mm-navy:       #1E1B58;   /* Texto principal, items col2/col3         */
    --mm-blue:       #3E66FF;   /* Títulos col1, items activos, hover       */
    --mm-gray:       #7D8AA1;   /* Subtítulo col1                           */
    --mm-bg:         #F5F7FA;   /* Fondo del panel del mega menú            */
    --mm-card:       #FAFBFD;   /* Fondo tarjetas                           */
    --mm-todos-bg:   #BED2FF;   /* Fondo botón "Todos los tratamientos"     */
    --mm-shadow:     0 4px 32px 0 rgba(0, 0, 0, 0.08);

    /* ── Dimensiones columnas (desktop) ── */
    --mm-col-w:      33%;
    --mm-gap:        24px;
    --mm-radius:     16px;
    --mm-pad:        24px;

    /* ── Tipografía ── */
    --mm-font-title:    16px;
    --mm-font-subtitle: 14px;
    --mm-font-item:     16px;
    --mm-font-label:    14px;

    /* ── Transiciones ── */
    --mm-speed: .18s;
}


/* ════════════════════════════════════════════════════════════════════════════
   DESKTOP  ( ≥ 768px )
   ════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {

    /* ── Contenedor principal ── */
    .mm-nav {
        display:    block;
        background: var(--mm-bg);
        padding:    var(--mm-pad);
        width:      100%;
        box-sizing: border-box;
        font-family: inherit;
    }

    /* mm-slider: transparente en desktop, las cols son hijos directos visualmente */
.mm-nav .mm-slider {
    display:     flex;
    align-items: stretch;
    gap:         var(--mm-gap);
    width:       100%;
    overflow:    hidden;           /* ← por si col3 se sale al aparecer */
}

    /* ── Columnas: base ── */
.mm-nav .mm-col {
    display:        flex;
    flex-direction: column;
    flex:           0 0 calc((100% - (var(--mm-gap) * 2)) / 3);
    min-width:      0;
    max-width:      calc((100% - (var(--mm-gap) * 2)) / 3);       /* ← igual que flex-basis */
    position:       relative;
}

    /* Col 2 y 3: ocultas hasta que el usuario hace click */
    .mm-nav .mm-col--2,
    .mm-nav .mm-col--3 {
        display: none;
    }

    .mm-nav .mm-col--2.is-visible,
    .mm-nav .mm-col--3.is-visible {
        display:   flex;
        animation: mm-col-in var(--mm-speed) ease both;
    }

    @keyframes mm-col-in {
        from { opacity: 0; transform: translateX(-8px); }
        to   { opacity: 1; transform: translateX(0);    }
    }

    /* ── COLUMNA 1: cada familia es su propia tarjeta ── */
    .mm-nav .mm-col--1 {
        gap: 12px;
    }

    .mm-nav .mm-familia {
        display:         flex;
        align-items:     center;
        gap:             16px;
        background:      var(--mm-card);
        border:          none;
        border-radius:   var(--mm-radius);
        box-shadow:      none;
        padding:         16px 24px;
        cursor:          pointer;
        width:           100%;
        text-align:      left;
        transition:      box-shadow var(--mm-speed), background var(--mm-speed);
    }

    .mm-nav .mm-familia:hover,
    .mm-nav .mm-familia.is-active,
    .mm-nav .mm-familia:focus
     {
        box-shadow:      var(--mm-shadow);
        border: none;
        border-radius:   var(--mm-radius);
        background:      white;

        
    }

    .mm-nav .mm-subfamilia:focus
    {
        border: none;
    }

    .mm-nav .mm-familia.is-active .mm-familia-title {
        color: var(--mm-blue);
    }

    .mm-nav .mm-familia-body {
        flex:    1;
        min-width: 0;
    }
    .mm-nav .mm-col--1 {
    gap: 16px;
    align-self: flex-start; /* ← no se estira con col2/col3 */
}

    .mm-nav .mm-familia-title {
        display:     block;
        font-size:   var(--mm-font-title);
        font-weight: 600;
        color:       var(--mm-blue);
        line-height: 1.3;
    }

    .mm-nav .mm-familia-subtitle {
        display:     block;
        font-size:   var(--mm-font-subtitle);
        color:       var(--mm-gray);
        margin-top:  4px;
        line-height: 1.4;
        text-wrap: auto;
        color:       var(--mm-gray);
    }
    .mm-nav svg.mm-arrow {
        width: 24px;
        height: 24px;
        color:      var(--mm-navy);
    }
    /* Botón "Todos los tratamientos" */
    .mm-nav .mm-todos {
        display:         block;
        background:      var(--mm-todos-bg);
        border-radius:   var(--mm-radius);
        padding:         16px 24px;
        text-align:      left;
        font-size:       var(--mm-font-title);
        font-weight:     600;
        color:           var(--mm-navy);
        text-decoration: none;
        transition:      background var(--mm-speed), color var(--mm-speed);
        margin-top:      auto;  /* empuja al fondo si hay espacio */
        cursor: pointer;
    }

    .mm-nav .mm-todos:hover {
        background: var(--mm-blue);
        color:      #fff;
    }

    /* ── COLUMNAS 2 y 3: una sola tarjeta blanca ── */
    .mm-nav .mm-col--2,
    .mm-nav .mm-col--3 {
        background:    white;
        border-radius: var(--mm-radius);
        box-shadow:    var(--mm-shadow);
        padding:       8px 0 16px;
        overflow-y:    auto;
    }

    /* Items de col2 y col3 */
    .mm-nav .mm-subfamilia,
    .mm-nav .mm-tratamiento {
        display:         flex;
        align-items:     center;
        justify-content: space-between;
        gap:             8px;
        padding:         12px 20px;
        font-size:       var(--mm-font-item);
        color:           var(--mm-navy);
        text-decoration: none;
        background:      transparent;
        border:          none;
        width:           100%;
        text-align:      left;
        cursor:          pointer;
        transition:      color var(--mm-speed), background var(--mm-speed);
        line-height:     1.4;
    }

    .mm-nav .mm-subfamilia:hover,
    .mm-nav .mm-tratamiento:hover {
        color:      var(--mm-blue);
        background: white;
        border: none;
    }

    .mm-nav .mm-subfamilia.is-active {
        color:      var(--mm-blue);
        font-weight: 600;
    }

    .mm-nav .mm-tratamiento.is-active {
        color: var(--mm-blue);
    }

    .mm-nav .mm-subfamilia span,
    .mm-nav .mm-tratamiento span {
        flex: 1;
    }

    /* Flecha: col2 items la muestran, col3 items no */
    .mm-nav .mm-col--2 .mm-arrow {
        width:      14px;
        height:     14px;
        flex-shrink: 0;
        color:      var(--mm-gray);
        transition: color var(--mm-speed), transform var(--mm-speed);
    }

    .mm-nav .mm-col--2 .mm-subfamilia:hover .mm-arrow,
    .mm-nav .mm-col--2 .mm-subfamilia.is-active .mm-arrow {
        color:     var(--mm-blue);
        transform: translateX(2px);
    }

    .mm-nav .mm-col--3 .mm-arrow {
        display: none;  /* sin flecha en los tratamientos en desktop */
    }

    /* ── Botón volver ── */
    /* En desktop: solo visible en col3 (para cerrarla) */
    .mm-nav .mm-back--col2 { display: none; }

    .mm-nav .mm-back--col3 {
        display:         none!important;
        position:        absolute;
        bottom:          16px;
        right:           16px;
        width:           36px;
        height:          36px;
        border-radius:   50%;
        padding:         unset;
        background:      var(--mm-card);
        border:          1px solid #e0e4f0;
        box-shadow:      0 2px 8px rgba(30,46,110,0.12);
        display:         flex;
        align-items:     center;
        justify-content: center;
        cursor:          pointer;
        color:           var(--mm-navy);
        transition:      background var(--mm-speed), color var(--mm-speed);
        z-index:         1;
    }

    .mm-nav .mm-back--col3:hover {
        background: var(--mm-blue);
        color:      #fff;
        border-color: var(--mm-blue);
    }

    .mm-nav .mm-back--col3 .mm-arrow {
        width:  16px;
        height: 16px;
    }

    /* Espacio inferior en col3 para que el botón no tape items */
    .mm-nav .mm-col--3 {
        padding-bottom: 60px;
    }

    /* Grupos ocultos */
    .mm-nav .mm-group[hidden] { display: none !important; }

    .mm-nav .mm-group {
        display:        flex;
        flex-direction: column;
    }

} /* end @media desktop */


/* ════════════════════════════════════════════════════════════════════════════
   MOBILE  ( < 768px )
   Técnica: slider horizontal (100% fiable, sin position:absolute)
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    .mm-nav .mm-nav {
        overflow:   hidden;
        width:      100%;
        background: var(--mm-card);
        font-family: inherit;
    }

    /* ── Slider: flex row con 3 columnas ── */
    .mm-nav .mm-slider {
        display:    flex;
        width:      300%;           /* 3× el ancho del nav */
        transition: transform .32s cubic-bezier(.4, 0, .2, 1);
    }

    /* ── Cada columna ocupa 1/3 del slider = 100% del nav ── */
    .mm-nav .mm-col {
        width:          calc(100% / 3);
        flex-shrink:    0;
        display:        flex !important; /* anula display:none del desktop */
        flex-direction: column;
        padding:        8px 0 80px;     /* padding-bottom para no tapar el botón volver */
        min-height:     300px;
        box-sizing:     border-box;
        background:     var(--mm-card);
        position:       relative;
    }

    /* ── Familias col1 mobile ── */
    .mm-nav .mm-familia {
        display:         flex;
        align-items:     flex-start;
        gap:             12px;
        background:      transparent;
        border:          none;
        border-bottom:   1px solid #f0f2f8;
        padding:         20px 20px;
        cursor:          pointer;
        width:           100%;
        text-align:      left;
        text-wrap: auto;
    }

    .mm-nav .mm-familia-body { flex: 1; }

    .mm-nav .mm-familia-title {
        display:     block;
        font-size:   16px;
        font-weight: 600;
        color:       var(--mm-blue);
        line-height: 1.3;
    }

    .mm-nav .mm-familia-subtitle {
        display:    block;
        font-size:  13px;
        color:      var(--mm-gray);
        margin-top: 4px;
        line-height: 1.4;
    }

    .mm-nav .mm-familia .mm-arrow {
        width:      18px;
        height:     18px;
        flex-shrink: 0;
        color:      var(--mm-navy);
        margin-top: 2px;
    }

    /* ── "Todos los tratamientos" mobile ── */
    .mm-nav .mm-todos {
        display:         block;
        background:      var(--mm-todos-bg);
        border-radius:   12px;
        margin:          20px 20px 0;
        padding:         16px;
        text-align:      center;
        font-size:       15px;
        font-weight:     500;
        color:           var(--mm-navy);
        text-decoration: none;
    }

    /* ── Subfamilias col2 mobile ── */
    .mm-nav .mm-subfamilia {
        display:         flex;
        align-items:     center;
        justify-content: space-between;
        gap:             8px;
        background:      transparent;
        border:          none;
        border-bottom:   1px solid #f0f2f8;
        padding:         20px 20px;
        font-size:       16px;
        color:           var(--mm-navy);
        cursor:          pointer;
        width:           100%;
        text-align:      left;
    }

    .mm-nav .mm-subfamilia .mm-arrow {
        width:      18px;
        height:     18px;
        flex-shrink: 0;
        color:      var(--mm-navy);
    }

    /* ── Tratamientos col3 mobile ── */
    .mm-nav .mm-tratamiento {
        display:         block;
        border-bottom:   1px solid #f0f2f8;
        padding:         20px 20px;
        font-size:       16px;
        color:           var(--mm-navy);
        text-decoration: none;
    }

    .mm-nav .mm-tratamiento .mm-arrow { display: none; }

    /* ── Grupos ── */
    .mm-nav .mm-group[hidden] { display: none !important; }
    .mm-nav .mm-group { display: flex; flex-direction: column; }

    /* ── Botón volver: círculo flotante bottom-right ── */
    .mm-nav .mm-back {
        position: absolute;
        bottom: 20px;
        right: 26px;
        width: 32px!important;
        height: 32px;
        background: none;
        border: 1px solid transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 4px 14px rgba(30, 46, 110, 0.25);
        color: black;
        transition: background var(--mm-speed), transform var(--mm-speed);
        z-index: 10;
        padding: 0 !important;
    }

    .mm-nav .mm-back:active {
        transform: scale(0.93);
    }

    .mm-nav .mm-back .mm-arrow {
        width:  22px;
        height: 22px;
    }

    /* Col1 no tiene botón volver */
    .mm-nav .mm-col--1 .mm-back { display: none; }

} /* end @media mobile */