/* ========================================================
   CENTRO DE AYUDA — ver inc/ayuda/render.php.
   Color y tipografía desde los tokens de style.css.
   ======================================================== */

/* ========================================================
   LA CABECERA PEGADA AL MENÚ
   Reglas GEMELAS de las de css/tiendas.css, css/impacto.css y css/sobre-nosotros.css: cada
   landing carga solo su hoja, y las cuatro necesitan lo mismo. Si Kadence cambia sus clases,
   hay que tocar las cuatro.
   ======================================================== */
body.mmc-landing-sangre .content-area,
body.mmc-landing-sangre .site-main,
body.mmc-landing-sangre .entry-content-wrap,
body.mmc-landing-sangre .entry-content,
body.mmc-landing-sangre .content-container,
body.mmc-landing-sangre .site-container,
body.mmc-landing-sangre .wp-site-blocks,
body.mmc-landing-sangre #primary,
body.mmc-landing-sangre article.entry {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
body.mmc-landing-sangre .wp-block-kadence-header,
body.mmc-landing-sangre .kb-header-placeholder-wrapper { margin-bottom: 0 !important; }

body.mmc-landing-sangre .entry-hero-container-inner,
body.mmc-landing-sangre .entry-header,
body.mmc-landing-sangre .page-title { display: none !important; }


/* ========================================================
   BASE
   ======================================================== */
.mmc-ay {
    font-family: var(--mmc-fuente);
    color: var(--mmc-texto);
    /* `clip` y no `hidden`: `hidden` crearía un contenedor de scroll y la barra lateral pegajosa
       dejaría de pegarse. */
    overflow-x: clip;
}

/* La cabecera sale del contenedor del tema para ocupar la ventana entera. */
.mmc-ay .mmc-ay-hero {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}


/* ========================================================
   CABECERA
   ======================================================== */
.mmc-ay-hero { position: relative; }
.mmc-ay-hero-plano { background: linear-gradient(100deg, #1f9bdd, #1577c4); }

.mmc-ay-hero-caja {
    max-width: 1280px;
    margin: 0 auto;
    padding: 64px 20px 54px;
}

.mmc-ay .mmc-ay-hero-titulo {
    margin: 0;
    color: #fff;
    font-size: clamp(27px, 3.8vw, 40px);
    font-weight: 700;
    line-height: 1.18;
    text-wrap: balance;
    /* Seguro de legibilidad: el velo se puede bajar a cero desde el panel. */
    text-shadow: 0 1px 14px rgba(0, 0, 0, .3);
}
.mmc-ay .mmc-ay-hero-sub {
    margin: 12px 0 0;
    color: rgba(255, 255, 255, .92);
    font-size: clamp(15px, 1.5vw, 19px);
    font-weight: 400;
    line-height: 1.45;
}

/* ---- La banda del buscador ---- */
/* Un velo oscuro en vez de un color propio: así funciona igual sobre el degradado y sobre
   cualquier foto que se suba, sin tener que elegir un segundo color a juego. */
.mmc-ay-barra { background: rgba(0, 0, 0, .17); }

.mmc-ay-barra-caja {
    display: flex;
    align-items: center;
    gap: 34px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 16px 20px;
}

.mmc-ay-buscador {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 1 470px;
    box-sizing: border-box;
    height: 48px;
    padding: 0 8px 0 18px;
    background: #fff;
    border-radius: var(--mmc-radio-pildora);
}
.mmc-ay-lupa { flex: 0 0 auto; color: var(--mmc-enlace); }

.mmc-ay .mmc-ay-input {
    flex: 1;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    font-family: inherit;
    font-size: 15px;
    color: var(--mmc-texto);
}
.mmc-ay .mmc-ay-input:focus { outline: none; box-shadow: none; }
.mmc-ay .mmc-ay-input::placeholder { color: var(--mmc-texto-tenue); }
/* La X nativa de Chrome sobraría al lado de la nuestra. */
.mmc-ay .mmc-ay-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* Kadence repinta cualquier <button> al enfocarlo con su propio fondo Y con color:#fff.
   Hay que neutralizar las dos cosas, en todos los estados. */
.mmc-ay .mmc-ay-limpiar {
    display: none;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    padding: 0;
    background: none !important;
    border: 0 !important;
    border-radius: 50%;
    box-shadow: none !important;
    font-size: 20px;
    line-height: 1;
    color: var(--mmc-texto-tenue) !important;
    cursor: pointer;
}
.mmc-ay .mmc-ay-limpiar:hover,
.mmc-ay .mmc-ay-limpiar:focus,
.mmc-ay .mmc-ay-limpiar:active {
    background: var(--mmc-fondo-gris) !important;
    color: var(--mmc-texto) !important;
}
.mmc-ay .mmc-ay-limpiar.is-visible { display: block; }

/* ---- Contactos rápidos ---- */
/* Van pegados al buscador, a su derecha, y NO empujados al extremo de la banda: sin el
   `margin-left:auto` de antes se leen como una continuación de la búsqueda y no como un bloque
   aparte perdido en la esquina. */
.mmc-ay-contactos {
    display: flex;
    align-items: center;
    gap: 6px;
}
.mmc-ay-contacto {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    border-radius: var(--mmc-radio);
    font-size: 15px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .92);
    /* Cada contacto en UNA línea: el texto y su nota son una sola frase. */
    white-space: nowrap;
    transition: background-color .15s ease;
}
.mmc-ay-contacto:hover { background: rgba(255, 255, 255, .15); }

/* La raya va en un pseudoelemento y no en el borde de la caja, para que el fondo del hover
   cubra la caja entera sin comerse el separador. */
.mmc-ay-contacto + .mmc-ay-contacto { margin-left: 14px; position: relative; }
.mmc-ay-contacto + .mmc-ay-contacto::before {
    content: "";
    position: absolute;
    left: -14px;
    top: 50%;
    width: 1px;
    height: 22px;
    margin-top: -11px;
    background: rgba(255, 255, 255, .4);
}

.mmc-ay-contacto-icono { width: 20px; height: 20px; flex: 0 0 20px; object-fit: contain; }

.mmc-ay .mmc-ay-contacto-txt {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.mmc-ay .mmc-ay-contacto-txt:hover { color: #fff; }
/* En línea y del mismo tamaño: la nota forma parte de la frase, no es un pie de texto. */
.mmc-ay-contacto-nota { font-weight: 400; color: inherit; }


/* ========================================================
   CUERPO
   ======================================================== */
.mmc-ay-cuerpo {
    display: grid;
    grid-template-columns: 276px minmax(0, 1fr);
    gap: 44px;
    align-items: start;
    max-width: 1280px;
    margin: 48px auto 0;
    padding: 0 20px;
}

/* ---- Barra lateral ---- */
.mmc-ay-lateral {
    position: sticky;
    /* 120px: el alto de la cabecera pegajosa de Kadence más un respiro. Con los 24px de antes,
       la barra se quedaba detrás del menú al bajar. Mismo valor que la columna de compartir del
       blog (css/blog.css): si cambia el alto de la cabecera, hay que tocar los dos. */
    top: 120px;
    box-sizing: border-box;
    padding: 22px 16px;
    background: #fff;
    border: 1px solid var(--mmc-borde-fuerte);
    border-radius: var(--mmc-radio-grande);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}
.mmc-ay .mmc-ay-lateral-titulo {
    margin: 0 0 14px;
    padding: 0 10px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--mmc-texto-fuerte);
}

.mmc-ay-grupos { display: flex; flex-direction: column; gap: 2px; }

.mmc-ay .mmc-ay-grupo-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: var(--mmc-radio);
    font-size: 15px;
    line-height: 1.35;
    color: var(--mmc-texto-suave);
    text-decoration: none;
    transition: transform .18s ease, color .18s ease, background-color .18s ease;
}
/* Lo que pidió el diseño: al pasar por encima el grupo se corre un poco a la derecha y su
   icono crece. El desplazamiento va en el enlace y el crecimiento en el icono —escalar el
   enlace entero emborronaría el texto durante la transición. */
.mmc-ay .mmc-ay-grupo-link:hover {
    transform: translateX(5px);
    background: var(--mmc-fondo-suave);
    color: var(--mmc-texto-fuerte);
}
.mmc-ay .mmc-ay-grupo-link:hover .mmc-ay-grupo-icono { transform: scale(1.14); }

.mmc-ay .mmc-ay-grupo-link.is-activo {
    background: var(--mmc-seleccion-fondo);
    color: var(--mmc-enlace);
    font-weight: 600;
}

.mmc-ay-grupo-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    transition: transform .18s ease;
}
.mmc-ay-icono-img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* El de respaldo es un SVG con currentColor, así que se tiñe solo al marcar el grupo. */
.mmc-ay-icono-svg { color: inherit; }


/* ========================================================
   COLUMNA DERECHA — dos estados, nunca los dos a la vez
   ======================================================== */
.mmc-ay-panel { min-width: 0; }

.mmc-ay-grupo { display: none; }
.mmc-ay-grupo.is-activo { display: block; }
/* Mientras se busca, manda la lista de resultados. */
.mmc-ay-buscando .mmc-ay-grupo { display: none !important; }

/* ---- Estado LISTA ---- */
.mmc-ay-lista.is-oculta { display: none; }

.mmc-ay-lista-cabeza {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--mmc-borde);
}
.mmc-ay-lista-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    color: var(--mmc-texto-suave);
}
.mmc-ay-lista-icono .mmc-ay-icono-svg { width: 28px; height: 28px; }

.mmc-ay .mmc-ay-lista-titulo {
    margin: 0;
    font-size: clamp(21px, 2.3vw, 26px);
    font-weight: 700;
    line-height: var(--mmc-lh-titulo);
    color: var(--mmc-texto-fuerte);
}

.mmc-ay .mmc-ay-fila {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 21px 4px;
    border-bottom: 1px solid var(--mmc-borde);
    font-size: 17px;
    line-height: 1.4;
    color: var(--mmc-texto-fuerte);
    text-decoration: none;
    transition: color .15s ease;
}
.mmc-ay .mmc-ay-fila:hover { color: var(--mmc-enlace); }
.mmc-ay-fila-txt { flex: 1; min-width: 0; }
.mmc-ay-fila-grupo { flex: 0 0 auto; font-size: 13px; color: var(--mmc-texto-tenue); }

.mmc-ay-fila .mmc-ay-chevron {
    flex: 0 0 auto;
    color: var(--mmc-texto-tenue);
    transition: transform .15s ease, color .15s ease;
}
.mmc-ay .mmc-ay-fila:hover .mmc-ay-chevron { transform: translateX(3px); color: var(--mmc-enlace); }

/* ---- Estado CONTENIDO ---- */
.mmc-ay-detalle { display: none; }
.mmc-ay-detalle.is-activo { display: block; }

.mmc-ay .mmc-ay-volver {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 20px;
    font-size: 15px;
    font-weight: 600;
    color: var(--mmc-enlace);
    text-decoration: none;
    transition: transform .15s ease;
}
.mmc-ay .mmc-ay-volver:hover { transform: translateX(-3px); color: var(--mmc-enlace); }

.mmc-ay .mmc-ay-detalle-titulo {
    margin: 0 0 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--mmc-borde);
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 700;
    line-height: var(--mmc-lh-titulo);
    color: var(--mmc-texto-fuerte);
}

/* Kadence estiliza los <p> y los <h*> del contenido con selectores de dos clases, así que
   estas reglas van prefijadas con .mmc-ay para poder ganarle sin recurrir a !important. */
.mmc-ay .mmc-ay-detalle-texto { font-size: 16px; line-height: 1.7; color: var(--mmc-texto); }
.mmc-ay .mmc-ay-detalle-texto p { margin: 0 0 18px; font-size: 16px; line-height: 1.7; }
.mmc-ay .mmc-ay-detalle-texto p:last-child { margin-bottom: 0; }
.mmc-ay .mmc-ay-detalle-texto h3,
.mmc-ay .mmc-ay-detalle-texto h4 {
    margin: 30px 0 12px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--mmc-texto-fuerte);
}
.mmc-ay .mmc-ay-detalle-texto ul,
.mmc-ay .mmc-ay-detalle-texto ol { margin: 0 0 18px; padding-left: 22px; }
.mmc-ay .mmc-ay-detalle-texto li { margin-bottom: 8px; line-height: 1.7; }
.mmc-ay .mmc-ay-detalle-texto a {
    color: var(--mmc-enlace);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.mmc-ay .mmc-ay-detalle-texto strong { font-weight: 700; color: var(--mmc-texto-fuerte); }
.mmc-ay .mmc-ay-detalle-texto img { max-width: 100%; height: auto; border-radius: var(--mmc-radio); }
.mmc-ay .mmc-ay-detalle-texto table { width: 100%; border-collapse: collapse; margin: 0 0 18px; }
.mmc-ay .mmc-ay-detalle-texto th,
.mmc-ay .mmc-ay-detalle-texto td {
    padding: 10px 12px;
    border: 1px solid var(--mmc-borde);
    text-align: left;
    font-size: 15px;
}


/* ========================================================
   ¿TE HA RESULTADO ÚTIL?
   ======================================================== */
.mmc-ay-util {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    margin-top: 52px;
    padding: 15px 22px;
    border: 1px solid var(--mmc-borde-fuerte);
    border-radius: var(--mmc-radio);
}
.mmc-ay-util-txt { font-size: 15px; color: var(--mmc-texto-suave); }
.mmc-ay-util-botones { display: flex; align-items: center; gap: 8px; }

/* Mismo cuidado que con el botón de limpiar: Kadence pinta fondo Y color:#fff al enfocar, y el
   texto del voto desaparecería sobre blanco justo después de pulsarlo. */
.mmc-ay .mmc-ay-voto {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    background: #fff !important;
    border: 1px solid var(--mmc-borde-fuerte) !important;
    border-radius: var(--mmc-radio-pildora);
    box-shadow: none !important;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--mmc-texto-fuerte) !important;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.mmc-ay .mmc-ay-voto:hover,
.mmc-ay .mmc-ay-voto:focus,
.mmc-ay .mmc-ay-voto:active {
    background: var(--mmc-seleccion-fondo) !important;
    border-color: var(--mmc-seleccion) !important;
    color: var(--mmc-texto-fuerte) !important;
}
.mmc-ay-voto img { width: 22px; height: 22px; object-fit: contain; }

.mmc-ay-util-gracias { display: none; font-size: 15px; font-weight: 600; color: var(--mmc-texto-fuerte); }
.mmc-ay-util.is-votado .mmc-ay-util-txt,
.mmc-ay-util.is-votado .mmc-ay-util-botones { display: none; }
.mmc-ay-util.is-votado .mmc-ay-util-gracias { display: inline; }


/* ========================================================
   RESULTADOS DE BÚSQUEDA
   ======================================================== */
.mmc-ay-resultados { display: none; }
.mmc-ay-resultados.is-activo { display: block; }

.mmc-ay .mmc-ay-resultados-titulo,
.mmc-ay .mmc-ay-resultados-vacio { display: none; }
.mmc-ay .mmc-ay-resultados-titulo.is-visible {
    display: block;
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mmc-texto-tenue);
}
.mmc-ay .mmc-ay-resultados-vacio.is-visible {
    display: block;
    margin: 0;
    padding: 28px 0;
    font-size: 16px;
    color: var(--mmc-texto-suave);
}


/* ========================================================
   BLOQUE DE CONTACTO FINAL
   ======================================================== */
.mmc-ay-cta {
    max-width: 1280px;
    margin: 76px auto 0;
    padding: 0 20px;
}
.mmc-ay .mmc-ay-cta-titulo {
    margin: 0 0 26px;
    font-size: clamp(18px, 1.8vw, 21px);
    font-weight: 700;
    line-height: 1.35;
    color: var(--mmc-texto-fuerte);
    text-align: center;
    text-wrap: balance;
}

.mmc-ay-cta-caja {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 36px;
    padding: 34px 40px;
    background: var(--mmc-fondo-info);
    border-radius: var(--mmc-radio-grande);
}
.mmc-ay .mmc-ay-cta-texto {
    flex: 1 1 270px;
    margin: 0;
    font-size: 17px;
    line-height: 1.55;
    color: var(--mmc-texto);
}

/* El icono ya no es hermano del enlace: va dentro (ver inc/ayuda/render.php), así que la vía de
   contacto es una columna de dos piezas, el enlace y su nota. */
.mmc-ay-cta-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 1 230px;
}
/* La raya solo entre vías de contacto: entre el texto y la primera no la lleva el diseño. */
.mmc-ay-cta-item + .mmc-ay-cta-item {
    padding-left: 36px;
    border-left: 1px solid rgba(0, 0, 0, .14);
}
.mmc-ay-cta-icono { width: 22px; height: 22px; flex: 0 0 22px; object-fit: contain; }

.mmc-ay .mmc-ay-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--mmc-texto-fuerte);
    /* El subrayado va en el texto y no en el enlace entero: en el enlace cruzaría también por
       debajo del icono. */
    text-decoration: none;
}
.mmc-ay .mmc-ay-cta-link-txt {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.mmc-ay .mmc-ay-cta-link:hover { color: var(--mmc-enlace); }
.mmc-ay .mmc-ay-cta-nota {
    margin: 5px 0 0;
    font-size: 15px;
    line-height: 1.45;
    color: var(--mmc-texto-suave);
}
/* Con icono, la nota se sangra lo que ocupan el icono y su hueco (22 + 12) para que siga
   cayendo debajo del título, como antes de meter el icono dentro del enlace. */
.mmc-ay .mmc-ay-cta-item.is-con-icono .mmc-ay-cta-nota { padding-left: 34px; }


/* ========================================================
   PANTALLAS MEDIANAS Y MÓVIL
   ======================================================== */
@media (max-width: 1024px) {
    .mmc-ay-barra-caja { flex-wrap: wrap; gap: 14px 26px; }
    .mmc-ay-buscador { flex: 1 1 100%; }
    /* Los contactos pasan a su propia línea, pero siguen empezando por la izquierda. */
    .mmc-ay-contactos { flex: 1 1 100%; margin-left: -14px; }
}

@media (max-width: 900px) {
    /* POR QUÉ LA CABECERA NO LLEGABA A LOS BORDES. Arriba, .mmc-ay lleva `overflow-x: clip`
       para que la barra lateral pegajosa funcione. Ese recorte corta por los lados de .mmc-ay,
       y como el tema le mete un margen lateral a la página, la cabecera —que pide 100vw con
       márgenes negativos— se quedaba recortada justo en ese margen: por eso se veía como una
       postal con aire a los dos lados en vez de de borde a borde.
       Aquí la barra lateral ya no es pegajosa (más abajo pasa a `position: static`), así que el
       recorte no pinta nada y se quita. La cabecera mide exactamente la ventana, ni un pixel
       más, así que esto no añade desplazamiento horizontal a la página. */
    .mmc-ay { overflow-x: visible; }

    .mmc-ay-cuerpo {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
        margin-top: 32px;
    }

    /* La barra lateral no cabe al lado: pasa a ser una fila de píldoras con scroll horizontal,
       que es el mismo recurso que usan las otras landings del tema. */
    .mmc-ay-lateral {
        position: static;
        padding: 0;
        background: none;
        border: 0;
        box-shadow: none;
    }
    /* El rótulo de la columna SÍ se queda: aquí arriba de las píldoras hace de título de la
       lista ("Todos los temas"), que si no empiezan sin más. El texto sale del panel
       (Centro de ayuda → Título de la barra lateral), así que se cambia desde ahí. */
    .mmc-ay .mmc-ay-lateral-titulo {
        display: block;
        margin: 0 0 12px;
        font-size: 16px;
        font-weight: 700;
        color: var(--mmc-texto-fuerte);
    }

    /* Las píldoras en DOS filas que se desplazan hacia la derecha.
       La clave es `grid-auto-flow: column` con dos filas fijas: las píldoras se colocan de
       arriba abajo y luego saltan a la columna siguiente, que es justo el orden pedido —con
       cinco temas quedan tres arriba y dos abajo, emparejadas por columnas.
       Los márgenes negativos de 20px cancelan el relleno de .mmc-ay-cuerpo: las píldoras
       empiezan alineadas con el título pero se desplazan hasta el borde de la pantalla, que es
       lo que deja ver que hay más a la derecha. */
    .mmc-ay-grupos {
        display: grid;
        grid-auto-flow: column;
        grid-template-rows: repeat(2, auto);
        grid-auto-columns: max-content;
        justify-content: start;
        gap: 8px;
        margin: 0 -20px;
        padding: 2px 20px 4px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scroll-padding-left: 20px;
        /* La barra de desplazamiento se oculta: en el móvil no se usa y partiría las dos filas
           con una raya gris. El dedo arrastra igual. */
        scrollbar-width: none;
    }
    .mmc-ay-grupos::-webkit-scrollbar { display: none; }

    .mmc-ay .mmc-ay-grupo-link {
        padding: 8px 15px;
        border: 1px solid var(--mmc-borde-fuerte);
        border-radius: var(--mmc-radio-pildora);
        white-space: nowrap;
        scroll-snap-align: start;
    }
    /* Sin ratón no hay hover, y el desplazamiento solo conseguiría mover la fila al tocarla. */
    .mmc-ay .mmc-ay-grupo-link:hover { transform: none; }
    .mmc-ay .mmc-ay-grupo-link.is-activo { border-color: var(--mmc-seleccion); }
}

@media (max-width: 782px) {
    .mmc-ay-hero-caja { padding: 44px 20px 36px; }

    /* Título y frase centrados: en una pantalla estrecha el título ocupa dos o tres líneas y
       alineado a la izquierda queda descolgado del resto, que ya va centrado. */
    .mmc-ay .mmc-ay-hero-titulo,
    .mmc-ay .mmc-ay-hero-sub { text-align: center; }

    /* Más aire a los lados del buscador: pegado al borde del bloque parecía que se salía. */
    .mmc-ay-barra-caja { padding: 14px 24px; }

    /* Los contactos (teléfono, chat, lo que pongas) no se muestran en el móvil: debajo del
       buscador se comían la primera pantalla entera antes de llegar a los temas, y esa misma
       información vuelve a salir completa en el bloque de contacto del final. */
    .mmc-ay-contactos { display: none; }

    .mmc-ay .mmc-ay-fila { padding: 18px 2px; font-size: 16px; }
    .mmc-ay-fila-grupo { display: none; }

    .mmc-ay-util {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        width: 100%;
        box-sizing: border-box;
        margin-top: 40px;
    }

    .mmc-ay-cta { margin-top: 48px; }
    /* `align-items: stretch` es lo que hace que los botones salgan de lado a lado: en
       escritorio la caja va con `flex-start`, que en columna significa "cada bloque tan ancho
       como su contenido", y los botones quedarían de distinto ancho cada uno. */
    .mmc-ay-cta-caja {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        padding: 24px 20px;
    }

    /* AQUÍ ESTABA EL HUECO ENORME. En escritorio estos bloques llevan `flex: 1 1 270px` y
       `flex: 1 1 230px`, donde ese número es el ANCHO mínimo porque la caja va en fila. Al
       pasar a columna, el mismo número deja de ser ancho y se convierte en ALTO: cada bloque
       pedía 230 o 270 píxeles de alto aunque su texto ocupara tres líneas, y por eso quedaban
       separados por media pantalla.
       Con `flex: 0 0 auto` cada uno mide lo que mide su contenido. */
    .mmc-ay .mmc-ay-cta-texto,
    .mmc-ay-cta-item { flex: 0 0 auto; }

    /* Como la referencia: cada vía de contacto es un botón de borde redondeado con el icono y
       el texto centrados dentro, y debajo su nota en gris pequeño. El fondo de la caja no se
       toca: el botón es transparente y solo pone el borde. */
    .mmc-ay-cta-item {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: 10px;
    }
    .mmc-ay .mmc-ay-cta-texto { text-align: center; }

    .mmc-ay .mmc-ay-cta-link {
        display: flex;
        justify-content: center;
        gap: 8px;
        box-sizing: border-box;
        width: 100%;
        padding: 13px 18px;
        background: transparent;
        border: 1.5px solid var(--mmc-texto-fuerte);
        border-radius: var(--mmc-radio-pildora);
        font-size: 16px;
        font-weight: 600;
    }
    /* Dentro de un botón el subrayado sobra: el borde ya dice que se pulsa. */
    .mmc-ay .mmc-ay-cta-link-txt { text-decoration: none; }
    .mmc-ay .mmc-ay-cta-link:hover { color: var(--mmc-texto-fuerte); }

    /* La nota sale del botón, centrada y sin la sangría del escritorio (allí servía para
       alinearla con el título; aquí todo va centrado). */
    .mmc-ay .mmc-ay-cta-nota,
    .mmc-ay .mmc-ay-cta-item.is-con-icono .mmc-ay-cta-nota {
        margin: 0;
        padding-left: 0;
        font-size: 14px;
    }

    /* Sin raya entre vías de contacto: las separa el hueco de la caja, igual que la referencia. */
    .mmc-ay-cta-item + .mmc-ay-cta-item {
        padding-left: 0;
        padding-top: 0;
        border-left: 0;
        border-top: 0;
    }
}