/****************************************************************************/
/* MERCADOS GALEGOS — Folla de estilos                                     */
/* Todas as clases levan o prefixo "mg-".                                   */
/*                                                                          */
/* Medidas: os PDF do deseño están nun lenzo de 1920 px. Cada medida        */
/* escríbese como calc(N * var(--mg-px)), con N = px do PDF.                */
/* --mg-escala decide o tamaño real: .75 => o lenzo de 1920 ocupa 1440 px.  */
/* Por debaixo dese ancho todo redúcese en proporción á pantalla.           */
/****************************************************************************/

@font-face { font-family: 'Xunta Sans'; src: url('../fonts/xuntasans-regular.woff2') format('woff2'), url('../fonts/XUNTASANS-REGULAR.OTF') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Xunta Sans'; src: url('../fonts/xuntasans-italic.woff2') format('woff2'), url('../fonts/XUNTASANS-ITALIC.OTF') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Xunta Sans'; src: url('../fonts/xuntasans-bold.woff2') format('woff2'), url('../fonts/XUNTASANS-BOLD.OTF') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Xunta Sans'; src: url('../fonts/xuntasans-bolditalic.woff2') format('woff2'), url('../fonts/XUNTASANS-BOLDITALIC.OTF') format('opentype'); font-weight: 700; font-style: italic; font-display: swap; }

:root {
    --mg-blue: #007bc4;
    --mg-navy: #073856;
    --mg-gold: #d9bb52;
    --mg-gold-light: #f6db80;
    --mg-bg-light: #eef3f6;
    --mg-text: #1d1d1b;
    --mg-text-muted: #707070;
    --mg-text-suave: #4d6b7e;  /* textos secundarios en azul gris: 5:1 sobre --mg-bg-light (o gris daba 4,4:1) */
    --mg-placeholder: #dfe6ea;
    --mg-font: 'Xunta Sans', 'Segoe UI', Arial, sans-serif;
    --mg-ease-out: cubic-bezier(.23, 1, .32, 1);

    --mg-escala: .75;
    --mg-px: min(calc(var(--mg-escala) * 1px), calc(100vw / 1920));
    /* Ancho do lenzo e marxe ata el, para colocar cousas sobre bandas a todo o ancho */
    --mg-lenzo: calc(1920 * var(--mg-px));
    --mg-marxe: max(0px, calc((100vw - var(--mg-lenzo)) / 2));

    /* Ritmo vertical (o mínimo é o valor en móbil):
       L entre seccións distintas, M entre bloques que seguen o discurso, S dentro dun mesmo grupo */
    --mg-esp-l: max(80px, calc(200 * var(--mg-px)));
    --mg-esp-m: max(40px, calc(96 * var(--mg-px)));
    --mg-esp-s: max(24px, calc(48 * var(--mg-px)));

    /* Na Xunta Sans o centro das maiúsculas queda 0.085em por riba do centro da liña (métricas da fonte:
       ascendente 0.762, descendente 0.238, maiúsculas 0.69-0.70). Corrección única para toda a web:
       - texto dentro dunha caixa (botóns, pílulas, filtros, menú): o texto baixa --mg-optico
         (recheo de arriba +--mg-optico e de abaixo -; nos de alto mínimo, o span do texto con translate)
       - marcador xunto a un texto sen caixa (puntos, iconas): o marcador sube --mg-optico */
    --mg-optico: .085em;
}

html {
    scroll-behavior: smooth;
    scrollbar-gutter: stable;  /* hueco da barra sempre reservado: en contacto (cabe na pantalla, sen barra) a cabeceira desprazábase á dereita */
    -webkit-tap-highlight-color: transparent;  /* o brillo gris do toque; o feedback é o :active de cada elemento */
    -webkit-text-size-adjust: 100%;  /* sen letra inflada ao xirar o móbil */
}

button, a, summary { touch-action: manipulation; }  /* sen espera do dobre toque */

/* viewport-fit=cover (header.php): a páxina chega ao bordo e o recheo mantena fóra da mosca e da barra de inicio */
body {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}
button { -webkit-user-select: none; user-select: none; }  /* o toque longo non selecciona o texto dos botóns */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* Fundido curto ao ir doutra páxina do sitio (idioma, menú): como cabeceira e fotos son iguais, só se ve
   cambiar o texto. Navegadores sen View Transitions (Firefox) cambian de golpe, como antes */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
}

::view-transition-old(root),
::view-transition-new(root) { animation-duration: .2s; }

.page-mg {
    font-family: var(--mg-font);
    font-size: max(16px, calc(24 * var(--mg-px)));
    line-height: 1.6;
    color: var(--mg-text);
    background: #fff;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

.page-mg h1,
.page-mg h2,
.page-mg h3,
.page-mg h4 {
    font-family: var(--mg-font);
    font-weight: 700;
    line-height: 1.2;
    color: var(--mg-blue);
    margin: 0 0 16px;
}

.page-mg h1 { font-size: max(28px, calc(48 * var(--mg-px))); }
.page-mg h2 { font-size: max(22px, calc(36 * var(--mg-px))); }

.page-mg p { margin: 0 0 16px; }

.page-mg a:focus-visible,
.page-mg button:focus-visible,
.page-mg input:focus-visible {
    outline: 2px solid var(--mg-blue);
    outline-offset: 3px;
}

/* Co rato non: o a:focus de Bootstrap pintaba un recadro ao facer clic nas ligazóns */
.page-mg a:focus:not(:focus-visible) { outline: 0; }

/* Salto ao contido (menu.php): fóra da pantalla ata que o teclado chega a el */
.page-mg .mg-saltar {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 1000002;  /* sobre a cabeceira e a barra de progreso */
    padding: calc(10px + var(--mg-optico)) 16px calc(10px - var(--mg-optico));
    border-radius: 8px;
    background: #fff;
    color: var(--mg-navy);
    font-weight: 700;
    transform: translateY(-200%);
}
.page-mg .mg-saltar:focus { transform: none; }
main:focus { outline: 0; }  /* só recibe o foco ao saltar; non é un control */

/* Contedor do deseño: 1290 px de contido no lenzo */
@media (min-width: 1200px) {
    .page-mg .container { width: calc(1290 * var(--mg-px) + 30px); }
}

/* Separación vertical común entre seccións */
.mg-section {
    padding: var(--mg-esp-l) 0;
}

@media (max-width: 767px) {
}

/* Enlace con frecha longa, ex. "Ver mercados galegos ->" */
.mg-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: calc(32 * var(--mg-px));
    font-weight: 700;
    color: var(--mg-blue);
}

/* :hover/:focus só anulan o subliñado e a cor de Bootstrap; o resaltado vai co rato ou co teclado:
   no móbil o toque deixaba pegado o hover ou o foco */
.mg-link-arrow:hover,
.mg-link-arrow:focus {
    color: var(--mg-blue);
    text-decoration: none;
}

.mg-link-arrow:focus-visible { color: var(--mg-navy); }

.mg-arrow {
    position: relative;
    display: inline-block;
    width: max(32px, calc(64 * var(--mg-px)));
    height: 2px;
    background: currentColor;
    transition: transform .2s var(--mg-ease-out);
}

.mg-arrow::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 10px;
    height: 10px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
}

@media (hover: hover) and (pointer: fine) {
    .mg-link-arrow:hover { color: var(--mg-navy); }
    .mg-link-arrow:hover .mg-arrow { transform: translateX(6px); }
}

/* "Volver" (Emprender): píldora con borde e a frecha curta, mirando á esquerda. Recheo e marxe: o --mg-optico baixa o texto ao centro */
.mg-volver { gap: 10px; min-height: 44px; margin-bottom: var(--mg-esp-s); padding: calc(2 * var(--mg-optico)) 20px 0 16px; border: 2px solid var(--mg-blue); border-radius: 999px; background: #fff; font-size: 16px; transition: background-color .2s ease, color .2s ease; }
.mg-volver .mg-arrow { width: 20px; transform: scaleX(-1); }
.mg-volver .mg-arrow::after { width: 8px; height: 8px; }
.mg-volver[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
    .mg-volver:hover { background: var(--mg-blue); color: #fff; }
    .mg-volver:hover .mg-arrow { transform: scaleX(-1) translateX(4px); }
}

/* Botón en pílula dourada, ex. "Iniciar autoavaliación" */
.mg-btn-gold {
    display: inline-block;
    min-width: calc(453 * var(--mg-px));
    padding: calc(14 * var(--mg-px) + var(--mg-optico)) calc(40 * var(--mg-px)) calc(14 * var(--mg-px) - var(--mg-optico));
    border-radius: 999px;
    background: var(--mg-gold);
    color: var(--mg-navy);  /* o branco sobre o dourado daba 1,9:1 */
    font-weight: 700;
    text-align: center;
    transition: background-color .2s ease, transform .16s var(--mg-ease-out);
}

.mg-btn-gold:hover,
.mg-btn-gold:focus {
    color: var(--mg-navy);
    text-decoration: none;
}

.mg-btn-gold:focus-visible { background: #c9aa3f; }

@media (hover: hover) and (pointer: fine) {
    .mg-btn-gold:hover { background: #c9aa3f; }
}

.mg-btn-gold:active { transform: scale(.97); }

/* Iconas SVG en liña (functions.php: icona()): tamaño e cor do texto, como unha fonte de iconas */
.mg-icona {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -.125em;
    overflow: visible;
}

/* Oco gris para imaxes pendentes */
.mg-placeholder {
    background: var(--mg-placeholder);
}

/****************************************************************************/
/* Cabeceira e menú                                                         */
/****************************************************************************/

.mg-header {
    background: var(--mg-blue);
    color: #fff;
}

/* Fixa só cando o JS de menu.php mediu o alto e llo deu ao oco (antes vai no seu sitio: sen saltos ao cargar).
   O oco, azul: ao subir de golpe ata arriba vese mentres a cabeceira volve medrar (era unha franxa branca) */
.mg-header-oco { background: var(--mg-blue); }

.mg-header-oco.is-fixa .mg-header {
    position: fixed;
    z-index: 1200;  /* sobre os controis do mapa (Leaflet chega a 1000) */
    top: 0;
    left: 0;
    right: 0;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
}

/* Ao baixar estréitase: menos recheo e logos máis pequenos (só se move a cabeceira, o oco garda o alto enteiro) */
.mg-header-top { transition: padding .25s var(--mg-ease-out), border-color .25s ease; }
.mg-header-top img { transition: height .25s var(--mg-ease-out); }
.mg-header.sen-transicion * { transition: none !important; }  /* ao medila (menu.php) */

/* Só desde tableta: en móbil a cabeceira xa é baixa e estreitala (72 -> 62 px) era unha animación que non achegaba nada */
@media (min-width: 768px) {
    .mg-header.is-compacta .mg-header-top { padding: calc(18 * var(--mg-px)) 0 calc(14 * var(--mg-px)); }
    .mg-header.is-compacta .mg-logo-xunta { height: calc(54 * var(--mg-px)); }
    .mg-header.is-compacta .mg-logo-xacobeo { height: calc(30 * var(--mg-px)); }
    .mg-header.is-compacta .mg-logo-comercio { height: calc(42 * var(--mg-px)); }

    /* Estreita, as seccións recóllense no botón do menú, coma no móbil; ao abrilo volve a fila de seccións.
       Recóllese coma o menú do móbil (grid-template-rows de 1fr a 0fr): sempre en fila, sen tirón ao abrir e pechar */
    .mg-nav {
        display: grid;
        grid-template-rows: 1fr;
        transition: grid-template-rows .25s var(--mg-ease-out);
    }

    .mg-nav-links {
        min-height: 0;
        overflow: hidden;
        transition: padding .25s var(--mg-ease-out);
    }

    /* O recheo pasa aos li, coma no móbil: no ul, a fila pechada non baixaba de 58 px */
    .mg-header.is-compacta .mg-nav-links { padding: 0; }
    .mg-header.is-compacta .mg-nav-links li { padding: calc(8 * var(--mg-px)) 0 calc(12 * var(--mg-px)); }

    /* Xunto á lupa (sen o oco dos logos) e centrado coma o globo e a lupa; o botón segue a medir 44 px */
    .mg-header.is-compacta .mg-nav-toggle {
        display: inline-flex;
        align-items: center;
        margin: 0 -10px 0 calc(-70 * var(--mg-px) + 8px);
    }
    .mg-header.is-compacta .mg-nav:not(:has(.mg-nav-links.open)) {
        grid-template-rows: 0fr;
        visibility: hidden;
        transition: grid-template-rows .2s var(--mg-ease-out), visibility 0s .2s;  /* pechar: máis rápido ca abrir */
    }

    /* Sen seccións debaixo, a liña dos logos sobraba no bordo da cabeceira */
    .mg-header.is-compacta:not(:has(.mg-nav-links.open)) .mg-header-top { border-bottom-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .mg-header-top,
    .mg-header-top img,
    .mg-nav,
    .mg-nav-links { transition: none; }
}

.mg-header-top {
    display: flex;
    align-items: center;
    gap: calc(70 * var(--mg-px));
    padding: calc(66 * var(--mg-px)) 0 calc(39 * var(--mg-px));
    border-bottom: 1px solid rgba(255, 255, 255, .5);
}

.mg-header-logo { display: inline-block; line-height: 0; }

.mg-logo-xunta { height: calc(78 * var(--mg-px)); width: auto; }
.mg-logo-xacobeo { height: calc(42 * var(--mg-px)); width: auto; }
.mg-logo-comercio { height: calc(60 * var(--mg-px)); width: auto; }

/* Idioma e lupa á dereita, coma en comercio.xunta.gal: dous botóns redondos de 44 px */
.mg-header-accions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

/* Idioma: o globo abre "GALEGO | CASTELLANO" nunha tarxeta coma a dos resultados do buscador */
.mg-idioma { position: relative; }

.mg-idioma summary,
.mg-busca-abrir {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    list-style: none;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    font-size: max(22px, calc(32 * var(--mg-px)));
    cursor: pointer;
    transition: background-color .15s ease;
}

.mg-idioma summary::-webkit-details-marker { display: none; }
.page-mg .mg-idioma summary:focus-visible,
.page-mg .mg-busca-abrir:focus-visible { outline: 2px solid #fff; outline-offset: 2px; background: rgba(7, 56, 86, .35); }
.mg-idioma[open] summary,
.mg-busca-abrir[aria-expanded="true"] { background: var(--mg-navy); }

@media (hover: hover) and (pointer: fine) {
    .mg-idioma summary:hover,
    .mg-busca-abrir:hover { background: rgba(7, 56, 86, .35); }
}

.page-mg .mg-idioma-opcions {
    position: absolute;
    z-index: 1100;  /* sobre os controis do mapa, coma os resultados do buscador */
    top: calc(100% + 8px);
    right: 0;
    margin: 0;
    padding: 0 12px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(7, 56, 86, .25);
    color: var(--mg-navy);
    font-size: 15px;
    white-space: nowrap;
}

/* 44 px de alto para o dedo */
.mg-idioma-opcions > * { display: inline-block; padding: 12px 6px; }
.mg-idioma-opcions [aria-current] { font-weight: 700; }
.mg-idioma-ligazon { color: var(--mg-blue); }

.mg-nav-toggle {
    display: none;
    background: none;
    border: 0;
    color: #fff;
    font-size: 24px;
    padding: 8px 10px;  /* 44 px de ancho para o dedo */
}

.mg-nav-links {
    display: flex;
    justify-content: space-between;
    list-style: none;
    margin: 0;
    padding: calc(18 * var(--mg-px)) 0 calc(40 * var(--mg-px));
}

.mg-nav-links a {
    display: inline-block;
    padding: calc(6 * var(--mg-px) + var(--mg-optico)) calc(28 * var(--mg-px)) calc(6 * var(--mg-px) - var(--mg-optico));
    color: #fff;
    font-size: max(15px, calc(24 * var(--mg-px)));
    transition: background-color .15s ease;
}

.mg-nav-links a:hover,
.mg-nav-links a:focus {
    color: #fff;
    text-decoration: none;
}

.mg-nav-links a:focus-visible { background: rgba(7, 56, 86, .35); }
/* O azul xeral do foco é o da propia cabeceira: non se vía (AA pide 3:1) */
.page-mg .mg-header-logo:focus-visible,
.page-mg .mg-nav-links a:focus-visible,
.page-mg .mg-nav-toggle:focus-visible { outline-color: #fff; }

@media (hover: hover) and (pointer: fine) {
    .mg-nav-links a:hover { background: rgba(7, 56, 86, .35); }
}

.mg-nav-links a.active {
    background: var(--mg-navy);
    font-weight: 700;
}

@media (max-width: 767px) {
    .mg-header-top {
        flex-wrap: wrap;
        gap: 16px 20px;
        padding: 20px 0 16px;
        border-bottom: 0;  /* a liña vai no menú: co menú pechado quedaba sobre a foto do hero */
    }

    /* A 320 px logo, bandeiras e menú non collían por 7 px e o botón baixaba a outra liña */
    @media (max-width: 359px) {
        .mg-header-top { column-gap: 12px; }
        /* "GALEGO | CASTELLANO" saía pola esquerda colgado do globo: cólgase do bloque globo + lupa */
        .mg-header-accions { position: relative; }
        .mg-idioma { position: static; }
    }

    .mg-header-top .mg-logo-comercio { height: 40px; }
    .mg-header-accions { gap: 0; }  /* a 320 px logo, globo, lupa e menú collen nunha liña */

    /* Non caben os tres logos: queda o de Comercio Galego, a marca da iniciativa (o da Xunta segue no pé) */
    .mg-header-top > .mg-header-logo:has(.mg-logo-xunta),
    .mg-header-top > .mg-header-logo:has(.mg-logo-xacobeo) { display: none; }

    /* Coma o globo e a lupa: 44 x 44 co icono centrado (inline-block quedaba en 54 px de alto e o icono 3 px máis arriba),
       do mesmo tamaño e pegado á lupa (o oco da fila deixábao 20 px máis lonxe); o icono, ao bordo do contido */
    .mg-nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 -11px 0 -20px; padding: 0; font-size: 22px; }
    @media (max-width: 359px) { .mg-nav-toggle { margin-left: -12px; } }  /* aquí o oco da fila é de 12 px */

    /* Abre e pecha coa altura animada, coma os beneficios (antes aparecía de golpe e empurraba a páxina).
       O oco de arriba e abaixo vai nos li: co padding no ul o menú pechado non medía 0 */
    .mg-nav {
        display: grid;
        grid-template-rows: 0fr;
        visibility: hidden;
        transition: grid-template-rows .2s var(--mg-ease-out), visibility 0s .2s;  /* pechar: máis rápido ca abrir */
    }

    .mg-nav:has(.mg-nav-links.open) { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .25s var(--mg-ease-out); }

    .mg-nav-links {
        flex-direction: column;
        overflow: hidden;
        padding: 0;
        border-top: 1px solid rgba(255, 255, 255, .5);
    }

    .mg-nav-links li:first-child { padding-top: 8px; }
    .mg-nav-links li:last-child { padding-bottom: 16px; }

    /* Reducir movemento: sen cambio de alto animado, só un fundido */
    @media (prefers-reduced-motion: reduce) {
        .mg-nav { opacity: 0; transition: opacity .15s ease, grid-template-rows 0s .15s, visibility 0s .15s; }  /* ao pechar, o alto cae tras o fundido */
        .mg-nav:has(.mg-nav-links.open) { opacity: 1; transition: opacity .15s ease; }
    }

    .mg-nav-links a {
        display: block;
        padding: calc(12px + var(--mg-optico)) 0 calc(12px - var(--mg-optico));
        font-size: 18px;
    }

    /* Sección actual: só en negra, sen o bloque azul escuro (co texto pegado ao bordo pesaba demasiado) */
    .mg-nav-links a.active { background: none; }
}

/****************************************************************************/
/* Buscador da cabeceira (menu.php, js/busca.js): sen deseño no PDF          */
/****************************************************************************/

/* O oco de abaixo vai no padding (cunha marxe saía branco baixo a cabeceira); os resultados flotan baixo o campo */
.mg-busca {
    --mg-busca-oco: max(16px, calc(40 * var(--mg-px)));
    position: relative;
    padding-bottom: var(--mg-busca-oco);
}

.mg-busca-campo {
    width: 100%;
    height: max(44px, calc(64 * var(--mg-px)));
    padding: 0 max(20px, calc(32 * var(--mg-px)));
    border: 0;
    border-radius: 999px;
    color: var(--mg-text);
    font-family: var(--mg-font);
    font-size: max(16px, calc(24 * var(--mg-px)));  /* 16 px como mínimo: con menos, iOS amplía a páxina ao tocar */
}

/* normalize.css pon content-box nos input type="search" cun selector máis forte: co recheo o campo saía máis ancho ca o menú */
.page-mg .mg-busca-campo { box-sizing: border-box; }
.page-mg .mg-busca-campo:focus-visible { outline-color: #fff; }  /* o azul do resto da web non se ve sobre a cabeceira */

.mg-busca-resultados {
    position: absolute;
    z-index: 1100;  /* sobre os controis do mapa (Leaflet chega a 1000) */
    top: calc(100% - var(--mg-busca-oco) + 8px);
    left: 0;
    right: 0;
    max-height: 70vh;
    max-height: 70dvh;  /* vh inclúe a barra de enderezos e o teclado tapa o que sobra */
    overflow-y: auto;
    overscroll-behavior: contain;  /* ao chegar ao final non move a páxina de detrás */
    margin: 0;
    padding: 8px 0;
    list-style: none;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(7, 56, 86, .25);
}

.mg-busca-resultados a {
    display: block;
    padding: 10px max(20px, calc(32 * var(--mg-px)));
    color: var(--mg-navy);
    line-height: 1.3;
}

.mg-busca-resultados strong { display: block; }
.mg-busca-resultados span { display: block; color: var(--mg-text-muted); font-size: 14px; }

.mg-busca-resultados a:hover,
.mg-busca-resultados a:focus { color: var(--mg-navy); text-decoration: none; }
.page-mg .mg-busca-resultados a:focus-visible { outline: 0; background: var(--mg-bg-light); }

@media (hover: hover) and (pointer: fine) {
    .mg-busca-resultados a:hover { background: var(--mg-bg-light); }
}

.page-mg .mg-busca-baleiro { margin: 12px 0 0; padding-left: max(20px, calc(32 * var(--mg-px))); }

/****************************************************************************/
/* Hero                                                                     */
/****************************************************************************/

/* Fotos de fondo (hero, beneficios, frase): ?v=1 a man porque o CSS non sabe a data do ficheiro.
   Ao cambiar unha delas co mesmo nome, subir o número (?v=2) en todas as súas medidas */

/* Velo branco sobre as fotos: nos fondos vai na propia declaración; nas <img>, no wrapper .mg-foto */
:root { --mg-velo: linear-gradient(rgba(255, 255, 255, .15), rgba(255, 255, 255, .15)); }

.mg-foto { display: block; position: relative; overflow: hidden; }
.mg-foto > img { display: block; }
.mg-foto::after { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, .15); pointer-events: none; }
.mg-mercado-card img.mg-mercado-card-img { opacity: .85; background: #fff; }  /* o mesmo velo sen envoltorio: a tarxeta é unha grella */

.mg-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    height: min(calc(1229 * var(--mg-px)), calc(100svh - 293 * var(--mg-px)));  /* 1229 do PDF; en pantallas baixas, o texto e o enlace enteiros á vista (293: a cabeceira) */
    min-height: 480px;
    padding: 0 16px calc(110 * var(--mg-px)) calc(var(--mg-marxe) + 75 * var(--mg-px));
    background: #fff url('../img/inicio-hero-1920.webp?v=3') center 70% / cover no-repeat;
}

/* Velo branco pola esquerda para que se lea o texto (ata o 74 %: o h1 chega á comida escura do centro da foto).
   Punto medio: a .9 o cliente víao "demasiado branco" e a .675 o parágrafo non se lía sobre os garavanzos */
.mg-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, .76) 55%, rgba(255, 255, 255, .66) 64%, rgba(255, 255, 255, .13) 74%);
}

/* Escritorio: co velo máis lixeiro, título e enlace nun azul máis escuro ca o de marca para que se lean sobre a foto */
@media (min-width: 768px) {
    .mg-hero h1 { color: #005E96; }
}

.mg-hero-text { position: relative; }
/* Enlace sobre o velo cos azulexos: un azul escuro para que se lea co velo lixeiro (4,2:1 a 1440) */
.mg-hero .mg-link-arrow { --mg-blue: #004F80; }

.mg-hero h1 {
    font-size: max(30px, calc(64 * var(--mg-px)));
    margin-bottom: calc(44 * var(--mg-px));
}

.mg-hero p {
    max-width: calc(720 * var(--mg-px));
    margin-bottom: calc(20 * var(--mg-px));
    color: var(--mg-navy);
    line-height: 1.67;
}

/* Tablet: título e texto dentro da zona do velo (ata o 44 %), coma en escritorio; con 520 px chegaban ao 70 % e
   pisaban a foto. Sen o salto do título, que nese ancho partía "mercados" nunha liña soa */
@media (min-width: 768px) and (max-width: 991px) {
    .mg-hero h1,
    .mg-hero p { max-width: 40vw; }
    .mg-hero h1 br { display: none; }
}

/* Móbil (o PDF só trae escritorio): a foto enteira arriba, fundida en branco, e o texto debaixo a todo o ancho.
   Antes o texto ía sobre a foto: tapábaa, o título quedaba pegado á cabeceira e o parágrafo en liñas de 2-3 palabras.
   A foto en 3:2 pero nunca máis do 45 % da pantalla, para que en horizontal se vexa o título */
@media (max-width: 767px) {
    .mg-hero {
        --mg-hero-foto: min(66.667vw, 45svh);
        display: block;
        height: auto;
        min-height: 0;
        padding: calc(var(--mg-hero-foto) + 20px) 16px 0;
        background-position: center top;
        background-size: 100% auto;
    }

    .mg-hero::before {
        background: linear-gradient(180deg, rgba(255, 255, 255, .15) calc(var(--mg-hero-foto) - 72px), #fff var(--mg-hero-foto));  /* velo B+ na foto e fundido a branco */
    }

    .mg-hero h1 { margin-bottom: 20px; }
    .mg-hero h1 br { display: none; }
    .mg-hero p { max-width: none; }
}

/****************************************************************************/
/* Que é Mercados Galegos                                                   */
/****************************************************************************/

.mg-intro {
    padding: var(--mg-esp-l) 0 0;
}

.mg-intro h2 { padding-left: calc(22 * var(--mg-px)); }

.mg-intro p {
    max-width: calc(690 * var(--mg-px));
    color: var(--mg-text-muted);
}

/* Ata tablet título e texto van un enriba do outro (col-md-6): en dúas columnas o texto quedaba en 6 liñas */
@media (max-width: 991px) {
    .mg-intro h2 { padding-left: 0; }
    .mg-intro p { max-width: none; }
}

/****************************************************************************/
/* Vídeo / carrusel                                                         */
/****************************************************************************/

/* Mesma separación ca entre seccións: con menos, texto e vídeo líanse coma un só bloque */
.mg-video {
    padding: var(--mg-esp-l) 16px 0;
}

.mg-video-frame {
    position: relative;
    width: calc(1440 * var(--mg-px));
    margin: 0 auto;
    aspect-ratio: 1440 / 864;
    background: var(--mg-placeholder);
}

/* Pista do carrusel: scroll horizontal con snap (arrastre nativo no móbil) */
.mg-video-track {
    display: flex;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.mg-video-track::-webkit-scrollbar { display: none; }

.mg-video-slide {
    position: relative;
    flex: 0 0 100%;
    height: 100%;
    scroll-snap-align: start;
    background: #fff;
}

/* Velo B+ só na miniatura (.85 sobre branco = 15 % de branco): o vídeo, ao reproducilo, vese tal cal */
.mg-video-slide img { opacity: .85; }

.mg-video-slide img,
.mg-video-slide video,
.mg-video-slide iframe {
    display: block;
    border: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
}

.mg-video-play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(64px, calc(236 * var(--mg-px)));
    height: max(64px, calc(236 * var(--mg-px)));
    padding: 0;
    border: 3px solid #fff;
    border-radius: 50%;
    background: rgba(0, 0, 0, .12);
    transform: translate(-50%, -50%);
    transition: transform .16s var(--mg-ease-out), background-color .2s ease;
}

@media (hover: hover) and (pointer: fine) {
    .mg-video-play:not([aria-disabled="true"]):hover { background: rgba(0, 0, 0, .25); }
}
.mg-video-play:not([aria-disabled="true"]):active { transform: translate(-50%, -50%) scale(.95); }
.mg-video-play[aria-disabled="true"] { cursor: default; }

.mg-video-play::after {
    content: '';
    position: absolute;
    left: 54%;
    top: 50%;
    width: 42%;
    height: 48%;
    background: #fff;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    transform: translate(-50%, -50%);
}

/* Puntos do carrusel */
.mg-video-dots {
    position: absolute;
    left: 50%;
    bottom: calc(26 * var(--mg-px));
    display: flex;
    gap: calc(10 * var(--mg-px));
    transform: translateX(-50%);
}

.mg-video-dots button {
    width: max(12px, calc(24 * var(--mg-px)));
    height: max(12px, calc(24 * var(--mg-px)));
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: transparent;
    transition: background-color .2s ease;
}

.mg-video-dots button.active { background: #fff; }

/* Frechas fóra do vídeo, a cada lado (no móbil non hai sitio e van dentro) */
.mg-video-nav {
    position: absolute;
    top: 50%;
    width: max(44px, calc(72 * var(--mg-px)));
    height: max(44px, calc(72 * var(--mg-px)));
    padding: 0;
    border: 2px solid var(--mg-blue);
    border-radius: 50%;
    background: transparent;
    color: var(--mg-blue);
    transform: translateY(-50%);
    transition: transform .16s var(--mg-ease-out), background-color .2s ease, color .2s ease;
}

.mg-video-prev { right: calc(100% + max(12px, calc(40 * var(--mg-px)))); }
.mg-video-next { left: calc(100% + max(12px, calc(40 * var(--mg-px)))); }

/* Chevron feito co bordo dun cadrado xirado */
.mg-video-nav::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 28%;
    height: 28%;
    border: solid currentColor;
    border-width: 3px 3px 0 0;
    transform: translate(-65%, -50%) rotate(45deg);
}

.mg-video-prev::after { transform: translate(-35%, -50%) rotate(-135deg); }

@media (hover: hover) and (pointer: fine) {
    .mg-video-nav:hover { background: var(--mg-blue); color: #fff; }
}
.mg-video-nav:active { transform: translateY(-50%) scale(.95); }

/* Na diapositiva cun vídeo cargado (soando ou en pausa), os puntos non tapan os controis */
.mg-video-frame.is-playing .mg-video-dots { display: none; }

@media (prefers-reduced-motion: reduce) {
    .mg-video-track { scroll-behavior: auto; }
}

@media (max-width: 767px) {
    .mg-video-frame { width: 100%; }
    .mg-video-nav { border: 0; background: rgba(0, 0, 0, .45); color: #fff; }
    .mg-video-prev { right: auto; left: 8px; }
    .mg-video-next { left: auto; right: 8px; }
}

/****************************************************************************/
/* Rede de Mercados Excelentes                                              */
/****************************************************************************/

/* padding-bottom: a banda do Selo empeza baixa; así o oco ata ela iguala ao resto de seccións */
.mg-rede {
    padding: var(--mg-esp-l) 0 var(--mg-esp-s);
}

/* Selo e texto colocados sobre o lenzo; o selo pisa a foto */
.mg-rede-head {
    position: relative;
    width: var(--mg-lenzo);
    height: calc(234 * var(--mg-px));
    margin: 0 auto;
}

.mg-rede-selo {
    position: absolute;
    left: calc(179 * var(--mg-px));
    top: calc(53 * var(--mg-px));
    z-index: 1;
    width: calc(403 * var(--mg-px));
}

.mg-rede-selo img { width: 100%; height: auto; display: block; }

/* O selo cae coma un cuño un pouco despois da súa sección (.mg-reveal vén de js/index.js) */
.mg-rede.mg-reveal .mg-rede-selo {
    opacity: 0;
    transform: rotate(-12deg) scale(.9);
    transition: opacity .3s ease .15s, transform .5s var(--mg-ease-out) .15s;
}

.mg-rede.is-visible .mg-rede-selo { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .mg-rede.mg-reveal .mg-rede-selo { transition: none; }
}

.mg-rede-text {
    position: absolute;
    left: calc(665 * var(--mg-px));
    top: 0;
    width: calc(820 * var(--mg-px));
}

.mg-rede-text h2 { margin-bottom: calc(14 * var(--mg-px)); }

.mg-rede-text p {
    color: #767676;  /* #787878 quedaba en 4,41:1 (AA pide 4,5) */
    line-height: 1.25;
}

.mg-rede-photo {
    display: block;
    width: 100%;
    height: calc(505 * var(--mg-px));
    object-fit: cover;
}

.mg-rede-cta {
    padding: var(--mg-esp-s) 0 0;
    text-align: center;
}

.mg-rede-cta p {
    margin-bottom: calc(50 * var(--mg-px));
    color: var(--mg-text-muted);
}

@media (max-width: 1199px) {
    .mg-rede-head { width: auto; height: auto; padding: 0 16px 0 calc(665 * var(--mg-px)); }
    .mg-rede-text { position: static; width: auto; padding-bottom: 24px; }
}

@media (max-width: 767px) {
    .mg-rede { padding-bottom: 0; }
    .mg-rede-head { padding: 0 16px 0 140px; min-height: 160px; }
    .mg-rede-selo { left: 16px; top: 0; width: 110px; }
    .mg-rede-photo { height: auto; aspect-ratio: 16 / 9; }
}

/****************************************************************************/
/* Como obter o Selo (banda diagonal co mapa de Galicia)                    */
/****************************************************************************/

.mg-selo {
    position: relative;
    height: calc(1080 * var(--mg-px));
    overflow: hidden;
}

/* Banda de 504 px que baixa cara á dereita (10°) */
.mg-selo::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: calc(390 * var(--mg-px));
    height: calc(504 * var(--mg-px));
    background: var(--mg-bg-light);
    transform: skewY(10.1deg);
}

/* Liña de costa e Miño (img/galicia-linea.webp, recortada ao debuxo); posición medida no PDF */
.mg-selo-map {
    position: absolute;
    height: auto;
    left: calc(var(--mg-marxe) + 293 * var(--mg-px));
    top: calc(145 * var(--mg-px));
    width: calc(868 * var(--mg-px));
    pointer-events: none;
    /* Como no PDF, o límite leste interrómpese detrás do texto (medido: y 29,2–83,4 %, x desde 83 %) */
    clip-path: polygon(0 0, 100% 0, 100% 29.2%, 83% 29.2%, 83% 83.4%, 100% 83.4%, 100% 100%, 0 100%);
}

.mg-selo-text {
    position: absolute;
    right: calc(var(--mg-marxe) + 450 * var(--mg-px));
    top: calc(434 * var(--mg-px));
    width: calc(790 * var(--mg-px));
    text-align: right;
}

.mg-selo-text h2 {
    margin: 0 0 calc(60 * var(--mg-px)) auto;
    max-width: calc(400 * var(--mg-px));
}

.mg-selo-text p {
    margin-bottom: calc(90 * var(--mg-px));
    color: var(--mg-text-muted);
}

.mg-selo .mg-btn-gold { margin-right: calc(-8 * var(--mg-px)); }

/* Tablet: mapa e texto en fila, sen posicións absolutas */
@media (max-width: 1199px) {
    .mg-selo {
        display: flex;
        align-items: center;
        gap: 40px;
        height: auto;
        /* mesmo bordo ca o .container (750 px en tablet, 970 desde 992); abaixo sen recheo: Beneficios xa trae o seu oco */
        padding: 100px calc((100% - 750px) / 2 + 15px) 0;
    }

    .mg-selo::before { top: 50%; height: 45%; transform: translateY(-50%) skewY(10.1deg); }
    .mg-selo-map { position: relative; left: auto; top: auto; flex: 0 0 auto; width: 44%; max-width: 440px; clip-path: none; }
    .mg-selo-text { position: relative; right: auto; top: auto; flex: 1 1 auto; width: auto; }
    .mg-selo-text h2 { max-width: 400px; }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .mg-selo { padding-left: calc((100% - 970px) / 2 + 15px); padding-right: calc((100% - 970px) / 2 + 15px); }
}

/* Móbil: o mapa enriba e o texto debaixo */
@media (max-width: 767px) {
    .mg-selo { flex-direction: column; align-items: stretch; gap: 24px; padding: 80px 16px 0; }
    .mg-selo::before { top: 30%; height: 40%; transform: translateY(-50%) skewY(8deg); }
    .mg-selo-map { width: 72%; max-width: 300px; margin: 0 auto; }
    .mg-selo-text { text-align: left; }
    .mg-selo-text h2 { margin-left: 0; }
    .mg-btn-gold { min-width: 0; width: 100%; padding: calc(10px + var(--mg-optico)) 20px calc(10px - var(--mg-optico)); }
    .mg-selo .mg-btn-gold { margin-right: 0; }
}

/****************************************************************************/
/* Beneficios (despregable con iconas + foto)                               */
/****************************************************************************/

.mg-beneficios {
    position: relative;
    padding: var(--mg-esp-l) 0 var(--mg-esp-s);
    /* a foto (absoluta) remata dentro da sección: así a seguinte non ten que compensala.
       +50 px (e a foto igual): cabe a lista co beneficio máis longo aberto e os perfís de debaixo non se moven (faltaban ata 48 px) */
    min-height: calc(var(--mg-esp-l) + 840 * var(--mg-px) + 50px);
}

.mg-beneficios .container { position: relative; z-index: 1; }

.mg-beneficios h2 {
    max-width: calc(620 * var(--mg-px));
    margin-bottom: calc(100 * var(--mg-px));
    padding-left: calc(42 * var(--mg-px));
}

.mg-beneficios-list {
    list-style: none;
    margin: 0;
    padding: 0 0 0 calc(27 * var(--mg-px));
    max-width: calc(660 * var(--mg-px));
}

.mg-beneficio + .mg-beneficio { margin-top: calc(40 * var(--mg-px)); }

.mg-beneficio-head {
    display: flex;
    align-items: center;
    gap: calc(22 * var(--mg-px));
    width: 100%;
    padding: 4px 0;
    background: none;
    border: 0;
    color: var(--mg-navy);
    font-size: max(16px, calc(24 * var(--mg-px)));
    text-align: left;
}

.mg-beneficio-icon {
    flex: 0 0 calc(56 * var(--mg-px));
    color: var(--mg-gold);
    font-size: max(22px, calc(46 * var(--mg-px)));
    text-align: center;
}

.mg-beneficio-title { flex: 1 1 auto; }

.mg-beneficio-chevron {
    flex: 0 0 auto;
    color: var(--mg-gold);
    font-size: max(16px, calc(26 * var(--mg-px)));
    transition: transform .25s var(--mg-ease-out);
}

.mg-beneficio-head[aria-expanded="true"] .mg-beneficio-chevron { transform: rotate(180deg); }

/* Altura animada con grid-template-rows (0fr -> 1fr), sen medir en JS. Tamén nas preguntas frecuentes */
.mg-beneficio-body,
.mg-faq-body {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    visibility: hidden;  /* pechado: o lector de pantalla tampouco o le */
    /* Abrir e pechar coa mesma duración e curva: ao cambiar de beneficio os dous van á vez
       e a lista pasa dunha altura á outra nun só movemento (sen subir e volver baixar) */
    transition: grid-template-rows .2s var(--mg-ease-out), opacity .2s var(--mg-ease-out), visibility 0s .2s;
}

.mg-beneficio.is-open .mg-beneficio-body,
.mg-faq-item.is-open .mg-faq-body { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition-delay: 0s; }  /* abrir: visible xa ao empezar */

.mg-beneficio-body > div,
.mg-faq-body > div { overflow: hidden; }

.mg-beneficio-body p {
    margin: 0;
    padding: calc(8 * var(--mg-px)) calc(60 * var(--mg-px)) 4px calc(78 * var(--mg-px));
    color: var(--mg-navy);
    font-size: max(13px, calc(16 * var(--mg-px)));
    line-height: 1.2;
}

/* Movemento reducido: a altura cambia de golpe e o texto só aparece cun fundido */
@media (prefers-reduced-motion: reduce) {
    .mg-beneficio-body,
    .mg-beneficio.is-open .mg-beneficio-body,
    .mg-faq-body,
    .mg-faq-item.is-open .mg-faq-body { transition: opacity .2s ease; }
    .mg-beneficio-chevron,
    .mg-faq-chevron { transition: none; }
}

/* Foto pola dereita, que se funde en diagonal pola esquerda e sae polo bordo.
   Altura fixa (723 px do PDF): con bottom: 0 medraba ao abrir un beneficio e a imaxe reencadrábase */
.mg-beneficios-photo {
    position: absolute;
    left: calc(var(--mg-marxe) + 904 * var(--mg-px));
    right: 0;
    top: calc(var(--mg-esp-l) + 117 * var(--mg-px));
    height: calc(723 * var(--mg-px) + 50px);
    background: var(--mg-velo), url('../img/inicio-beneficios-1200.webp?v=2') left center / cover no-repeat;
    -webkit-mask-image: linear-gradient(110deg, transparent 18%, #000 42%);
    mask-image: linear-gradient(110deg, transparent 18%, #000 42%);
}

/* 992-1299 px: o texto ocupa máis liñas e un beneficio aberto pasaba ata 120 px da foto; foto (e sección) máis altas
   desde o principio, así a foto segue sen moverse ao abrilos */
@media (min-width: 992px) and (max-width: 1299px) {
    .mg-beneficios-photo { height: calc(723 * var(--mg-px) + 130px); }
    .mg-beneficios { min-height: calc(var(--mg-esp-l) + 840 * var(--mg-px) + 130px); }
}

@media (max-width: 991px) {
    .mg-beneficios-photo {
        position: static;
        width: 100%;
        height: 320px;
        margin-top: var(--mg-esp-m);
        -webkit-mask-image: none;
        }

    .mg-beneficios { min-height: 0; }
    .mg-beneficios-list { max-width: none; padding-left: 0; }
    .mg-beneficios h2 { max-width: none; padding-left: 0; }
}

@media (max-width: 767px) {
    .mg-beneficios h2 { margin-bottom: 32px; }
    .mg-beneficio + .mg-beneficio { margin-top: 12px; }
    .mg-beneficio-head { gap: 14px; }
    .mg-beneficio-icon { flex-basis: 36px; }
    .mg-beneficio-body p { padding: 4px 0 4px 50px; }
}

/****************************************************************************/
/* Perfís (Son profesional / cliente / administración)                      */
/****************************************************************************/

.mg-perfis {
    padding: var(--mg-esp-l) 16px 0;
}

.mg-perfis-row {
    display: flex;
    justify-content: space-between;
    max-width: calc(1404 * var(--mg-px));
    margin: 0 auto;
}

.mg-perfil {
    display: block;
    width: calc(366 * var(--mg-px));
    color: var(--mg-blue);
}

.mg-perfil:hover,
.mg-perfil:focus {
    color: var(--mg-blue);
    text-decoration: none;
}

.mg-perfil:focus-visible { color: var(--mg-navy); }

.mg-perfil-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 366 / 615;
    object-fit: cover;
    border-radius: calc(16 * var(--mg-px)) calc(16 * var(--mg-px)) 0 0;
    border-bottom: calc(21 * var(--mg-px)) solid var(--mg-blue);
}

.mg-perfil-label {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: calc(24 * var(--mg-px)) calc(6 * var(--mg-px)) 0 calc(14 * var(--mg-px));
}

.mg-perfil-label strong {
    display: block;
    font-size: max(16px, calc(24 * var(--mg-px)));
    font-weight: 700;
    line-height: 1.2;
}

.mg-perfil-label small {
    display: block;
    max-width: calc(190 * var(--mg-px));
    margin-top: 6px;
    font-size: max(12px, calc(16 * var(--mg-px)));
    font-weight: 700;
    line-height: 1.2;
}

.mg-perfil .mg-arrow {
    flex: 0 0 auto;
    margin-top: calc(14 * var(--mg-px));
}

/* A tarxeta sobe enteira; móvense os fillos porque o transform de .mg-perfil é da entrada (.mg-reveal) */
.mg-perfil > * { transition: transform .2s var(--mg-ease-out); }

@media (hover: hover) and (pointer: fine) {
    .mg-perfil:hover { color: var(--mg-navy); }
    .mg-perfil:hover .mg-arrow { transform: translateX(6px); }
    .mg-perfil:hover > * { transform: translateY(-6px); }
}

@media (max-width: 991px) {
    .mg-perfis-row { gap: 24px; max-width: none; }
    .mg-perfil { flex: 1 1 0; width: auto; }
    .mg-perfil-label small { max-width: none; }
}

@media (max-width: 767px) {
    .mg-perfis-row { flex-direction: column; gap: 40px; }
    .mg-perfil-img { aspect-ratio: 4 / 5; border-bottom-width: 16px; }
}

/****************************************************************************/
/* Historia                                                                 */
/****************************************************************************/

.mg-historia {
    padding: var(--mg-esp-l) 0 0;
}

.mg-historia-text {
    max-width: calc(780 * var(--mg-px));  /* ao borde esquerdo do contido, coma "Que é Mercados Galegos" e os beneficios */
}

.mg-historia h2 { margin-bottom: calc(70 * var(--mg-px)); }

.mg-historia p {
    color: #000;
    line-height: 1.25;
    margin-bottom: calc(30 * var(--mg-px));
}

@media (max-width: 991px) {
    .mg-historia-text { max-width: none; }
}

@media (max-width: 767px) {
}

/****************************************************************************/
/* Frase final sobre foto                                                   */
/****************************************************************************/

.mg-frase {
    position: relative;
    display: flex;
    align-items: flex-end;
    height: calc(628 * var(--mg-px));
    min-height: 300px;
    margin-top: var(--mg-esp-l);
    margin-bottom: var(--mg-esp-m);
    padding: 0 16px calc(60 * var(--mg-px)) calc(var(--mg-marxe) + 185 * var(--mg-px));
    background: var(--mg-velo), url('../img/inicio-frase-1920.webp?v=3') center 83% / cover no-repeat;
}

.mg-frase::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .25) 50%, rgba(0, 0, 0, 0) 80%);
}

.mg-frase p {
    position: relative;
    margin: 0;
    max-width: calc(1150 * var(--mg-px));
    color: #fff;
    font-size: max(28px, calc(64 * var(--mg-px)));
    font-style: italic;
    font-weight: 400;
    line-height: 1.2;
}

.mg-frase strong { font-weight: 700; }

@media (max-width: 991px) {
    .mg-frase p { max-width: 640px; }
}

@media (max-width: 767px) {
    .mg-frase { padding: 0 16px 32px; }
}

/****************************************************************************/
/* Preguntas frecuentes                                                     */
/****************************************************************************/

/* Páxina propia (emprender.php), cos espazos do Mapa do portal */
.mg-faq { padding: var(--mg-esp-m) 0 var(--mg-esp-l); }

.page-mg .mg-faq h1,
.page-mg .mg-faq h2 { margin-bottom: var(--mg-esp-s); }

/* Emprender: introdución e pasos nunha liña do tempo vertical (número nun círculo e liña ata o seguinte) */
.mg-posto-info { padding-top: var(--mg-esp-m); }

.page-mg .mg-posto-info h1 { margin-bottom: var(--mg-esp-s); }
.page-mg .mg-posto-info h2 { margin: var(--mg-esp-m) 0 var(--mg-esp-s); }
.page-mg .mg-posto-info p { max-width: 75ch; }

.mg-posto-pasos {
    --circulo: max(40px, calc(56 * var(--mg-px)));
    margin: var(--mg-esp-s) 0 0;
    padding: 0;
    list-style: none;
}

.mg-posto-pasos > li {
    position: relative;
    padding: 0 0 max(32px, calc(48 * var(--mg-px))) calc(var(--circulo) + max(20px, calc(32 * var(--mg-px))));
}

.mg-posto-pasos > li:not(:last-child)::before {
    content: '';
    position: absolute;
    top: var(--circulo);
    bottom: 0;
    left: calc(var(--circulo) / 2 - 1px);
    border-left: 2px solid var(--mg-bg-light);
}

.mg-posto-paso-num {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--circulo);
    height: var(--circulo);
    border-radius: 50%;
    background: var(--mg-blue);
    color: #fff;
    font-size: max(18px, calc(24 * var(--mg-px)));
    font-weight: 700;
}

/* Título centrado co círculo; o párrafo, debaixo */
.page-mg .mg-posto-pasos h3 {
    display: flex;
    align-items: center;
    min-height: var(--circulo);
    margin-bottom: 8px;
    font-size: max(18px, calc(24 * var(--mg-px)));
}

.page-mg .mg-posto-pasos p:last-child { margin-bottom: 0; }

.mg-faq-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mg-faq-item + .mg-faq-item { margin-top: max(24px, calc(40 * var(--mg-px))); }

.mg-faq-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-height: 44px;
    padding: 0 0 max(8px, calc(12 * var(--mg-px)));
    background: none;
    border: 0;
    border-bottom: 1px solid #c8dae5;
    color: var(--mg-blue);
    font-size: max(18px, calc(26 * var(--mg-px)));
    font-weight: 700;
    line-height: 1.2;  /* coma os títulos da páxina; co 1,6 herdado as preguntas en dúas liñas quedaban soltas */
    text-align: left;
}

.mg-faq-head:active { opacity: .7; }  /* sen o brillo gris do toque, a pregunta ten que responder ao premer */
.page-mg .mg-faq-head:focus-visible { outline: 2px solid var(--mg-navy); outline-offset: 4px; }

.mg-faq-chevron {
    flex: 0 0 auto;
    font-size: max(20px, calc(32 * var(--mg-px)));
    transition: transform .25s var(--mg-ease-out);
}

.mg-faq-head[aria-expanded="true"] .mg-faq-chevron { transform: rotate(180deg); }

.page-mg .mg-faq-item p,  /* .page-mg: senón .page-mg p pisa as marxes */
.page-mg .mg-faq-item ul,
.page-mg .mg-faq-mais {
    margin: max(12px, calc(24 * var(--mg-px))) 0 0;
    color: var(--mg-text-muted);
    font-size: max(16px, calc(20 * var(--mg-px)));
    line-height: 1.4;
}
.page-mg .mg-faq-item p { max-width: 75ch; }  /* a todo o ancho eran ~130 letras por liña */

.mg-faq-item ul { padding-left: 1.4em; list-style: disc; }  /* dentro doutra lista o navegador poñería círculos */

.page-mg .mg-faq-mais { margin-top: max(32px, calc(56 * var(--mg-px))); }

.mg-faq-mais a { color: var(--mg-blue); text-decoration: underline; }

/****************************************************************************/
/* Administración pública (administracion.php)                              */
/****************************************************************************/

/* Cabeceira: foto a todo o ancho baixo o menú, co texto en branco abaixo á esquerda.
   A muller está á dereita: o texto non lle chega á cara */
.mg-admin-cab {
    position: relative;
    display: flex;
    align-items: flex-end;
    /* Alto en proporción ao ancho (coma no modelo), non co lenzo: a foto vai a todo o ancho da pantalla */
    min-height: max(360px, 31.6vw);
    padding: calc(60 * var(--mg-px)) 0 max(32px, calc(60 * var(--mg-px)));
    background: var(--mg-velo), url('../img/administracion-cabeceira-1920.webp?v=2') center 46% / cover no-repeat var(--mg-navy);
    color: #fff;
}

/* Sombra escura pola esquerda e por abaixo para que se lea o texto branco */
.mg-admin-cab::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg, rgba(7, 56, 86, .6) 0%, rgba(7, 56, 86, 0) 55%),
        linear-gradient(90deg, rgba(7, 56, 86, .9) 0%, rgba(7, 56, 86, .7) 40%, rgba(7, 56, 86, 0) 62%);
}

.mg-admin-cab .container { position: relative; }

.page-mg .mg-admin-cab h1 {
    max-width: max(320px, calc(680 * var(--mg-px)));
    margin-bottom: max(12px, calc(24 * var(--mg-px)));
    color: #fff;
}

.page-mg .mg-admin-cab p {
    max-width: max(320px, calc(660 * var(--mg-px)));
    margin: 0;
    font-size: max(16px, calc(24 * var(--mg-px)));
}

/* Títulos e entradillas das seccións */
.mg-admin-seccion { padding-top: var(--mg-esp-l); }


.page-mg .mg-admin-entrada,
.page-mg .mg-admin-historia-intro p {
    max-width: calc(1060 * var(--mg-px));
    color: var(--mg-text-muted);
    font-size: max(16px, calc(24 * var(--mg-px)));
}

/* Textos curtos de tarxetas, iconas e pasos */
.page-mg .mg-admin-oportunidades h3,
.page-mg .mg-admin-iconas h3,
.page-mg .mg-admin-etapas h3,
.page-mg .mg-admin-pasos h3 {
    margin: 0 0 calc(16 * var(--mg-px));
    color: var(--mg-navy);
    font-size: max(16px, calc(20 * var(--mg-px)));
}

.page-mg .mg-admin-oportunidades p,
.page-mg .mg-admin-iconas p,
.page-mg .mg-admin-etapas p,
.page-mg .mg-admin-pasos p,
.mg-admin-pasos ul {
    margin: 0;
    color: var(--mg-text-muted);
    font-size: max(14px, calc(16 * var(--mg-px)));
    line-height: 1.3;
}


/* Historia: foto á esquerda e texto á dereita */
.mg-admin-historia { padding-top: var(--mg-esp-l); }

.mg-admin-historia-intro {
    display: grid;
    grid-template-columns: calc(633 * var(--mg-px)) 1fr;
    gap: calc(108 * var(--mg-px));
    align-items: center;
}

.mg-admin-historia-intro img {
    width: 100%;
    height: calc(369 * var(--mg-px));
    object-fit: cover;
}

.page-mg .mg-admin-historia-intro p { max-width: calc(660 * var(--mg-px)); margin: 0; }

/* Catro oportunidades: tarxeta con raia azul arriba, foto e texto sobre azul claro */
.mg-admin-oportunidades {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: calc(48 * var(--mg-px));
    margin-top: calc(190 * var(--mg-px));
    margin-bottom: 0;
    padding: 0;
    list-style: none;
}

.mg-admin-oportunidades li {
    background: var(--mg-bg-light);
}

.mg-admin-oportunidades img {
    display: block;
    width: 100%;
    height: calc(127 * var(--mg-px));
    object-fit: cover;
}

.mg-admin-oportunidades div { padding: calc(22 * var(--mg-px)) calc(37 * var(--mg-px)) calc(30 * var(--mg-px)); }

.page-mg .mg-admin-oportunidades h3 { font-size: max(15px, calc(16 * var(--mg-px))); }
.page-mg .mg-admin-oportunidades p { color: var(--mg-navy); font-size: max(13px, calc(14 * var(--mg-px))); }

/* Valores: icona nun círculo, título e texto */
.mg-admin-iconas {
    display: grid;
    grid-template-columns: calc(474 * var(--mg-px)) calc(449 * var(--mg-px)) 1fr;
    gap: calc(75 * var(--mg-px)) 0;
    margin: calc(85 * var(--mg-px)) 0 0;
    padding: 0;
    list-style: none;
}

.mg-admin-iconas li { padding-right: calc(60 * var(--mg-px)); }

.mg-admin-icona {
    display: flex;
    align-items: center;
    justify-content: center;
    width: max(64px, calc(100 * var(--mg-px)));
    height: max(64px, calc(100 * var(--mg-px)));
    margin-bottom: calc(37 * var(--mg-px));
    border-radius: 50%;
    background: var(--mg-bg-light);
    color: var(--mg-blue);
    font-size: max(24px, calc(36 * var(--mg-px)));
}

/* Frase en branco sobre banda azul escura */
.mg-admin-frase {
    margin-top: max(var(--mg-esp-l), calc(240 * var(--mg-px)));  /* no móbil, o oco de toda a web */
    padding: max(48px, calc(120 * var(--mg-px))) 15px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(105deg, var(--mg-blue) 0%, #0069A8 100%);  /* #0069A8: o azul de marca algo máis profundo; só escurece, o texto branco non perde contraste */
}

/* Liña de Galicia á dereita (a mesma do selo, en branco) */
.mg-admin-frase::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 1%;
    width: 360px;
    aspect-ratio: 1107 / 1172;
    background: url('../img/galicia-linea.webp?v=1') center / contain no-repeat;
    filter: brightness(0) invert(1);
    opacity: .22;
    transform: translateY(-50%);
    pointer-events: none;
}

/* Ondas de costa ao pé da banda */
.mg-admin-frase::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: calc(100 * var(--mg-px));  /* menos có recheo da banda: a onda non chega ao texto */
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' fill-opacity='.08' d='M0 48C240 14 480 78 720 48S1200 18 1440 48V100H0Z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' fill-opacity='.08' d='M0 68C240 34 480 98 720 68S1200 38 1440 68V100H0Z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
    pointer-events: none;
}

.mg-admin-frase .container { position: relative; }  /* o texto, por riba da liña e das ondas */

@media (max-width: 991px) {
    .mg-admin-frase::before { opacity: .16; }
}

@media (max-width: 767px) {
    .mg-admin-frase::before { right: -48px; width: 260px; opacity: .16; }
    .mg-admin-frase::after { height: 30px; }  /* a banda deixa 32 px baixo o texto: a onda non o toca */
}

.page-mg .mg-admin-frase p {
    max-width: calc(890 * var(--mg-px));
    margin: 0 auto;
    color: #fff;
    font-size: max(20px, calc(36 * var(--mg-px)));
    font-weight: 700;
    line-height: 1.22;
    text-align: center;
}

/* Liña do tempo: tres círculos unidos por unha liña, co texto centrado debaixo */
.mg-admin-etapas {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: calc(1701 * var(--mg-px));
    margin: calc(145 * var(--mg-px)) 0 0 50%;
    padding: 0;
    list-style: none;
    text-align: center;
    transform: translateX(-50%);
}

/* A liña vai dun centro de círculo ao outro (1/6 e 5/6 do ancho), á altura do seu medio */
.mg-admin-etapas::before {
    content: '';
    position: absolute;
    top: calc(max(40px, calc(75 * var(--mg-px))) / 2);
    left: calc(100% / 6);
    right: calc(100% / 6);
    border-top: 1px solid var(--mg-text-muted);
}

/* Círculo con icona (no PDF estaban baleiros) */
.mg-admin-etapa-circulo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: max(40px, calc(75 * var(--mg-px)));
    height: max(40px, calc(75 * var(--mg-px)));
    margin: 0 auto calc(22 * var(--mg-px));
    border-radius: 50%;
    background: color-mix(in srgb, var(--mg-blue) 32%, #fff);
    color: var(--mg-navy);
    font-size: max(20px, calc(34 * var(--mg-px)));
}

.page-mg .mg-admin-etapas h3 { font-size: max(17px, calc(24 * var(--mg-px))); }
.page-mg .mg-admin-etapas p { max-width: max(220px, calc(320 * var(--mg-px))); margin: 0 auto; }

/* Banda con foto e degradado azul escuro pola esquerda */
.mg-admin-banda {
    position: relative;
    height: max(150px, calc(200 * var(--mg-px)));
    margin-top: calc(95 * var(--mg-px));
    overflow: hidden;
    border-radius: calc(16 * var(--mg-px));
}

.mg-admin-banda img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 57%;  /* a franxa visible no PDF */
}

.mg-admin-banda::before {
    content: '';
    position: absolute;
    z-index: 1;  /* por riba da foto: dentro de .mg-foto (position: relative) a foto quedaba enriba e o texto branco sen fondo */
    inset: 0;
    background: linear-gradient(90deg, var(--mg-navy) 25%, rgba(7, 56, 86, 0) 75%);
}

.page-mg .mg-admin-banda p {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: calc(36 * var(--mg-px));
    max-width: max(220px, calc(360 * var(--mg-px)));
    margin: 0;
    color: #fff;
    font-size: max(16px, calc(20 * var(--mg-px)));
    font-weight: 700;
    line-height: 1.2;
    transform: translateY(-50%);
}

/* Tres pasos con raia azul, número grande e unha frecha entre eles */
.mg-admin-pasos {
    display: grid;
    grid-template-columns: repeat(3, calc(348 * var(--mg-px)));
    justify-content: space-between;
    margin: calc(150 * var(--mg-px)) 0 0;
    padding: 0;
    list-style: none;
}

.mg-admin-pasos > li {
    position: relative;
    border-top: 3px solid var(--mg-blue);
}

/* Frecha (›) feita co bordo dun cadrado xirado, no medio do oco ata o seguinte paso */
.mg-admin-pasos > li:not(:last-child)::after {
    content: '';
    position: absolute;
    top: calc(90 * var(--mg-px));
    right: calc(-75 * var(--mg-px));
    width: calc(22 * var(--mg-px));
    height: calc(22 * var(--mg-px));
    border-top: 3px solid var(--mg-blue);
    border-right: 3px solid var(--mg-blue);
    transform: rotate(45deg);
}

.mg-admin-paso-num {
    display: block;
    margin: calc(12 * var(--mg-px)) 0 calc(8 * var(--mg-px));
    color: var(--mg-blue);
    font-size: max(26px, calc(36 * var(--mg-px)));
    font-weight: 700;
    line-height: 1.2;
}

.page-mg .mg-admin-pasos h3 { font-size: max(15px, calc(16 * var(--mg-px))); }
.page-mg .mg-admin-pasos p,
.mg-admin-pasos ul { color: var(--mg-navy); font-size: max(13px, calc(14 * var(--mg-px))); }
.mg-admin-pasos ul { margin-top: calc(17 * var(--mg-px)); padding-left: 1.6em; list-style: disc; }  /* disco coma nas caixas "Dende" */

/* Dende o Concello / dende os postos: dúas caixas con raia, foto e lista con puntos */
.mg-admin-dende {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(101 * var(--mg-px));
    margin-top: calc(170 * var(--mg-px));
}

.page-mg .mg-admin-dende h3 {
    margin-bottom: calc(30 * var(--mg-px));
    color: var(--mg-blue);
    font-size: max(18px, calc(26 * var(--mg-px)));
    text-transform: uppercase;
}

/* As dúas caixas iguais aínda que unha lista sexa máis longa */
.mg-admin-dende > div { display: flex; flex-direction: column; }

.mg-admin-dende-caixa {
    flex: 1;
    background: var(--mg-bg-light);
}

.mg-admin-dende-caixa img {
    display: block;
    width: 100%;
    height: calc(163 * var(--mg-px));
    object-fit: cover;
}

.mg-admin-dende-caixa ul {
    margin: 0;
    padding: calc(24 * var(--mg-px)) calc(60 * var(--mg-px)) calc(40 * var(--mg-px)) calc(86 * var(--mg-px));
    color: var(--mg-navy);
    font-size: max(14px, calc(16 * var(--mg-px)));
    line-height: 1.25;
}

.mg-admin-dende-caixa li { margin-top: calc(26 * var(--mg-px)); }
.mg-admin-dende-caixa li::marker { color: var(--mg-navy); font-size: 1.4em; }
.mg-admin-dende-caixa li.is-aviso::marker { color: color-mix(in srgb, var(--mg-gold) 45%, #4a3a08); }
.mg-admin-dende-caixa strong { display: block; }

/* Mercados Excelentes:
   fondo branco, icona e título nunha liña e os textos nunha columna cunha raia dourada */
.mg-admin-excelentes { margin-top: var(--mg-esp-l); }
.mg-admin-excelentes + .mg-faq { padding-top: var(--mg-esp-l); }  /* sen a banda (e o seu recheo) quedaban 72 px; entre os outros bloques hai ~150 */

.mg-admin-excelentes-cab {
    display: flex;
    align-items: center;
    gap: max(16px, calc(24 * var(--mg-px)));
    margin-bottom: calc(50 * var(--mg-px));
}

.mg-admin-excelentes-cab .mg-admin-icona { margin: 0; }

.page-mg .mg-admin-excelentes h2 { margin: 0; }

.mg-admin-bloque + .mg-admin-bloque { margin-top: max(32px, calc(40 * var(--mg-px))); }

.page-mg .mg-admin-bloque h3 { margin-bottom: calc(12 * var(--mg-px)); font-size: max(18px, calc(24 * var(--mg-px))); }

.page-mg .mg-admin-bloque p + p { margin-top: 16px; }

.page-mg .mg-admin-bloque p {
    max-width: 75ch;
    margin: 0;
    color: var(--mg-navy);
    font-size: max(16px, calc(20 * var(--mg-px)));
}

/* Valores: como no móbil, filas coa icona á esquerda (centradas en 3 x 2 parecían unha plantilla) */
@media (min-width: 768px) {
    .mg-admin-iconas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
    .mg-admin-iconas li { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0 16px; padding: 20px 0; border-top: 1px solid #e1eaf0; }
    .mg-admin-iconas .mg-admin-icona { grid-row: span 2; width: 56px; height: 56px; margin: 0; font-size: 26px; }
}

/* Ordenador e tableta: texto de corpo a 16 px e títulos a 20 px (no móbil xa van a 16 px) */
@media (min-width: 768px) {
    .page-mg .mg-admin-oportunidades p,
    .page-mg .mg-admin-iconas p,
    .page-mg .mg-admin-etapas p,
    .page-mg .mg-admin-pasos p,
    .mg-admin-pasos ul,
    .mg-admin-dende-caixa ul { font-size: 16px; line-height: 1.35; }
    .page-mg .mg-admin-oportunidades h3,
    .page-mg .mg-admin-iconas h3,
    .page-mg .mg-admin-etapas h3,
    .page-mg .mg-admin-pasos h3,
    .page-mg .mg-admin-excelentes h3 { margin-bottom: 10px; font-size: 20px; }
}

/* Por debaixo de 1200 px as medidas do PDF escaladas deixaban os pasos en columnas de 150-190 px */
@media (max-width: 1199px) {
    .mg-admin-pasos { grid-template-columns: repeat(3, 1fr); gap: 48px; justify-content: stretch; }
    .mg-admin-pasos > li:not(:last-child)::after { right: -29px; }  /* no medio do oco de 48 px */
}

/* Tableta: as tarxetas en 2 x 2, a fila dourada en 2 columnas e a liña do tempo ao ancho da pantalla */
@media (max-width: 991px) {
    .mg-admin-etapas { width: calc(100vw - 30px); }
    .mg-admin-oportunidades { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
    .mg-admin-oportunidades img,
    .mg-admin-dende-caixa img { height: 120px; }  /* a 54-70 px eran tiras */
    .page-mg .mg-admin-historia-intro p { max-width: none; }
    .page-mg .mg-admin-frase p { max-width: 560px; }
}

/* Móbil: todo nunha columna */
@media (max-width: 767px) {
    /* Foto máis alta, recortada sobre a muller, e o texto por debaixo da cara */
    .mg-admin-cab { min-height: 0; padding: 200px 0 32px; background-position: 68% top; }
    .mg-admin-cab::before { background: linear-gradient(0deg, rgba(7, 56, 86, .9) 0%, rgba(7, 56, 86, .8) 50%, rgba(7, 56, 86, 0) 75%); }
    /* Os anchos máximos do PDF, escalados, deixaban o texto nunha columna de 130 px */
    .page-mg .mg-admin-cab p,
    .page-mg .mg-admin-entrada,
    .page-mg .mg-admin-historia-intro p,
    .page-mg .mg-admin-frase p { max-width: none; }
    .mg-admin-historia-intro { grid-template-columns: 1fr; gap: 24px; }
    .mg-admin-historia-intro img { height: auto; }
    .mg-admin-oportunidades,
    .mg-admin-iconas,
    .mg-admin-etapas,
    .mg-admin-dende { grid-template-columns: 1fr; gap: 32px; }
    .mg-admin-iconas li { padding-right: 0; }
    .mg-admin-oportunidades img { height: 120px; }
    .mg-admin-oportunidades div { padding: 16px 20px 20px; }
    /* texto a 16 px (a 13-14 px líase mal) e un oco entre cada título e o seu párrafo */
    .page-mg .mg-admin-oportunidades p,
    .page-mg .mg-admin-iconas p,
    .page-mg .mg-admin-etapas p { font-size: 16px; line-height: 1.35; }
    .page-mg .mg-admin-oportunidades h3 { font-size: 18px; }
    .page-mg .mg-admin-oportunidades h3,
    .page-mg .mg-admin-iconas h3,
    .page-mg .mg-admin-etapas h3,
    .page-mg .mg-admin-excelentes h3 { margin-bottom: 8px; }
    /* Liña do tempo en vertical, sen a liña horizontal e aliñada á esquerda coma as outras listas de iconas */
    .mg-admin-etapas::before { display: none; }
    .mg-admin-etapas { text-align: left; }
    .mg-admin-etapa-circulo { margin-left: 0; }
    .page-mg .mg-admin-etapas p { max-width: none; margin: 0; }
    .mg-admin-banda p { max-width: 70%; }
    .page-mg .mg-admin-frase p { margin: 0; text-align: left; }  /* 4 liñas: lese coma un parágrafo, non coma un titular */
    .mg-admin-frase .container, .mg-admin-frase { text-align: left; }
    .mg-admin-etapa-circulo { width: 64px; height: 64px; margin-bottom: 16px; font-size: 28px; }  /* o mesmo tamaño ca as outras iconas */
    .mg-admin-paso-num { margin: 20px 0 12px; }
    .page-mg .mg-admin-pasos h3 { margin-bottom: 12px; }
    .mg-admin-pasos { grid-template-columns: 1fr; gap: 40px; }
    .mg-admin-pasos > li:not(:last-child)::after { display: none; }
    .page-mg .mg-admin-pasos h3 { font-size: 18px; }
    .page-mg .mg-admin-pasos p,
    .mg-admin-pasos ul { font-size: 16px; }  /* 13 px líase mal no móbil */
    .mg-admin-dende-caixa img { height: 160px; }
    .mg-admin-dende-caixa ul { padding: 8px 20px 24px 40px; font-size: 16px; }
}

/****************************************************************************/
/* Autoavaliación (autoavaliacion.php): sen deseño no PDF                   */
/****************************************************************************/

.mg-autoav { padding: var(--mg-esp-m) 0 var(--mg-esp-l); }

.mg-autoav-intro {
    max-width: 760px;
    color: var(--mg-text-muted);
}

/* Escoller cuestionario: dúas píldoras; a escollida, enchida */
.mg-autoav-tipos {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;  /* os dous botóns, tan anchos coma o máis longo */
    width: fit-content;
    max-width: 100%;
    gap: 16px;
    margin: var(--mg-esp-s) 0;
}

@media (max-width: 767px) { .mg-autoav-tipos { grid-auto-flow: row; width: 100%; } }

.mg-autoav-tipo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 24px;
    border: 2px solid var(--mg-blue);
    border-radius: 999px;
    background: #fff;
    color: var(--mg-blue);
    font-weight: 700;
}

.mg-autoav-tipo:hover,
.mg-autoav-tipo:focus { color: var(--mg-blue); text-decoration: none; }

.mg-autoav-tipo[aria-current] { background: var(--mg-blue); color: #fff; }

.mg-autoav-tipo:active { transform: scale(.97); }

@media (hover: hover) and (pointer: fine) {
    .mg-autoav-tipo:not([aria-current]):hover { background: var(--mg-bg-light); }
}

.page-mg .mg-autoav-parte {
    margin: var(--mg-esp-s) 0 16px;
    padding-bottom: 8px;
    border-bottom: max(6px, calc(10 * var(--mg-px))) solid var(--mg-blue);
}

.mg-autoav-bloque { margin-bottom: var(--mg-esp-s); }

.page-mg .mg-autoav-bloque h3,
.page-mg .mg-autoav-bloque h4 {
    color: var(--mg-navy);
    font-size: max(18px, calc(24 * var(--mg-px)));
}

.mg-autoav-item {
    margin: 0 0 24px;
    padding: 0;
    border: 0;
}

/* Limpar unha resposta: enlace á dereita do título da pregunta (dentro da lenda), só se está respondida. O recheo e a marxe negativa dan 44 px de alto para o dedo sen mover nada */
.mg-autoav-limpar {
    float: right;
    margin: -12px 0 -12px 12px;
    padding: 12px 4px;
    border: 0;
    background: none;
    color: var(--mg-text-muted);
    font-size: 16px;
    font-weight: 700;
    text-decoration: underline;
}

.mg-autoav-item legend {
    margin-bottom: 8px;
    border: 0;
    color: var(--mg-navy);
    font-size: max(16px, calc(20 * var(--mg-px)));
    font-weight: 700;
}

.mg-autoav-obr {
    margin-left: .2em;  /* o asterisco vai pegado á última palabra (sen espazo no HTML): non queda só nin cun oco grande */
    color: var(--mg-navy);
    font-weight: 700;
}
.mg-autoav-leyenda .mg-autoav-obr { margin-left: 0; }

.page-mg .mg-autoav-leyenda,
.page-mg .mg-autoav-orde { margin: 0 0 var(--mg-esp-s); color: var(--mg-navy); font-size: 16px; }
.page-mg .mg-autoav-orde a { color: var(--mg-blue); text-decoration: underline; }
.mg-cab-pax .mg-link-arrow { margin-top: var(--mg-esp-s); }  /* campus virtual: aire bajo la entradilla */

/* Cada nivel: o radio, o número e o texto, nunha fila que se preme enteira */
.mg-autoav-nivel {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 6px;
    padding: 10px 12px;
    border: 1px solid var(--mg-placeholder);
    border-radius: 8px;
    font-weight: 400;
    cursor: pointer;
}

.mg-autoav-nivel:has(input:checked) { border-color: var(--mg-blue); background: var(--mg-bg-light); }

/* font: inherit para que 1lh sea la altura de la primera línea y el radio quede centrado con el número */
.mg-autoav-nivel input { flex: none; width: 20px; height: 20px; margin: calc((1lh - 20px) / 2 - .1em) 0 0; font: inherit; accent-color: var(--mg-blue); }

.mg-autoav-num {
    flex: none;
    width: 1.5em;
    color: var(--mg-blue);
    font-weight: 700;
}

.mg-autoav-campo,
.mg-autoav-marca {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    margin: 0;
    font-weight: 400;
}

.mg-autoav-campo { justify-content: space-between; max-width: 760px; }

.mg-autoav-campo input {
    width: 6em;
    padding: 6px 10px;
    border: 1px solid var(--mg-text-muted);
    border-radius: 6px;
}

.mg-autoav-marca input { accent-color: var(--mg-blue); }

.mg-autoav-resultado { margin-top: var(--mg-esp-s); }

.mg-autoav-resultado:empty { display: none; }

.mg-autoav-resultado ul { margin: 0 0 24px; padding: 0; list-style: none; }

/* Cada bloque, unha tarxeta: marca de cor á esquerda (azul cumpre, dourado non cumpre) */
.mg-autoav-resultado li {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
    padding: 16px;
    border: 1px solid var(--mg-placeholder);
    border-left: 6px solid var(--mg-placeholder);
    border-radius: 8px;
    background: #fff;
}

.mg-autoav-resultado li.is-ok { border-left-color: var(--mg-blue); }
.mg-autoav-resultado li.is-ko { border-left-color: var(--mg-gold); }

.mg-autoav-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mg-autoav-cab strong { flex: 1; }

/* Barras de progreso (a fixa de arriba e a de puntos de cada bloque): o <progress> nativo saía coma unha raia fina */
.mg-autoav-barra,
.mg-autoav-progreso progress {
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    border: 0;
    border-radius: 4px;
    background: var(--mg-bg-light);
    overflow: hidden;
    --cor: var(--mg-blue);
}
.mg-autoav-barra { width: 100%; --cor: var(--mg-gold); }  /* puntos fronte ao mínimo: chea = chegou */
.is-ok > .mg-autoav-barra { --cor: var(--mg-blue); }
.mg-autoav-barra::-webkit-progress-bar,
.mg-autoav-progreso progress::-webkit-progress-bar { background: var(--mg-bg-light); }
.mg-autoav-barra::-webkit-progress-value,
.mg-autoav-progreso progress::-webkit-progress-value { background: var(--cor); border-radius: 4px; transition: width .3s var(--mg-ease-out); }
.mg-autoav-barra::-moz-progress-bar,
.mg-autoav-progreso progress::-moz-progress-bar { background: var(--cor); border-radius: 4px; }
.mg-autoav-progreso.is-error progress { --cor: #b3261e; }

.mg-autoav-resultado strong { color: var(--mg-navy); }

.page-mg .mg-autoav-veredicto {
    padding: 12px 16px;
    border-left: 6px solid var(--mg-gold);
    background: var(--mg-bg-light);
    color: var(--mg-navy);
    font-weight: 700;
}

.page-mg .mg-autoav-veredicto.is-ok { border-left-color: var(--mg-blue); }

/* Mínimo de puntos baixo o título do capítulo ou do bloque */
.page-mg .mg-autoav-minimo {
    margin-top: -8px;
    color: var(--mg-text-muted);
    font-size: 16px;
}

/* Guía do cuestionario: índice numerado e barra de progreso fixa baixo a cabeceira (a súa altura vén de menu.php) */
.mg-autoav-indice {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 var(--mg-esp-s);
    scroll-margin-top: 16px;
}

.mg-autoav-indice:empty { display: none; }

.mg-autoav-num-paso {
    width: 44px;
    height: 44px;
    border: 2px solid var(--mg-blue);
    border-radius: 50%;
    background: #fff;
    color: var(--mg-blue);
    font-size: 16px;
    font-weight: 700;
    transition: background-color .2s ease, transform .16s var(--mg-ease-out);
}

.mg-autoav-num-paso[aria-current] { background: var(--mg-blue); color: #fff; }
.mg-autoav-num-paso:disabled { border-color: var(--mg-bg-light); background: var(--mg-bg-light); color: var(--mg-text-muted); }
.mg-autoav-num-paso:not(:disabled):active { transform: scale(.97); }

@media (hover: hover) and (pointer: fine) {
    .mg-autoav-num-paso:not(:disabled):not([aria-current]):hover { background: var(--mg-bg-light); }
}

.page-mg .mg-autoav-num-paso:focus-visible,
.page-mg .mg-autoav-tipo:focus-visible { outline-color: var(--mg-navy); }  /* o azul coincidía co bordo do botón */

.mg-autoav-progreso {
    position: sticky;
    top: var(--mg-cabeceira, 72px);
    z-index: 1000;  /* baixo a cabeceira fixa (1200) */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
    margin-bottom: var(--mg-esp-s);
    padding: 12px 0;
    background: #fff;
    border-bottom: 1px solid var(--mg-bg-light);
    color: var(--mg-navy);
    font-weight: 700;
}

.mg-autoav-progreso progress { flex: 1 1 100px; }
.mg-autoav-progreso.is-error span { color: #b3261e; }  /* faltan obrigatorias */
.mg-autoav-progreso span { flex: 1 1 auto; min-width: 0; }  /* con o aviso de pendentes o texto pasa a dúas liñas en vez de cortarse */

@media (max-width: 767px) {
    .mg-autoav-progreso progress { flex-basis: 100%; }  /* a 320 px o texto deixaba unha raia de 32 px */
}

/* Ao saltar a un título ou pregunta non queda tapado pola cabeceira (scroll-padding de menu.php) nin pola barra de progreso */
.mg-autoav-parte, .mg-autoav-bloque > h3, .mg-autoav-item { scroll-margin-top: calc(var(--mg-progreso, 54px) + 16px); }

/* Sen palabras soas na última liña ("venda" ao final de "…postos de venda"): o navegador reparte mellor as liñas */
.mg-autoav-nivel > span:last-child,
.mg-autoav-campo > span:first-child,
.mg-autoav-marca > span { text-wrap: pretty; }
.mg-autoav-item legend { text-wrap: balance; }  /* títulos curtos: as liñas quedan parellas (pretty non evitaba "venda *" soa) */

.mg-autoav-item.is-error legend { color: #b3261e; }
.page-mg .mg-autoav-erro { margin: 0 0 8px; color: #b3261e; font-size: 16px; font-weight: 700; }  /* 51 marcos vermellos eran demasiado ruído: só o título da pregunta */

/* Un paso por capítulo: Anterior / Seguinte (no último, "Ver resultado") */
.mg-autoav-capitulo[hidden] { display: none; }
.mg-autoav-pasos { display: flex; flex-wrap: wrap; gap: 16px; margin-top: var(--mg-esp-s); }
.mg-autoav-pasos .mg-btn-azul { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; margin-left: auto; min-width: 120px; }  /* o recheo escalado deixábao en ~25 px no móbil; 46 px é o que mide Anterior */
.mg-autoav-pasos [hidden] { display: none; }

button.mg-btn-azul { border: 0; }  /* o borde gris do navegador nos botóns azuis (Seguinte, Ver resultado, Imprimir) */

/* No resultado: título de cada capítulo cos seus puntos, e "Cumpre" / "Non cumpre" */
.page-mg .mg-autoav-resultado h4 {
    margin: 24px 0 0;
    color: var(--mg-navy);
    font-size: max(17px, calc(22 * var(--mg-px)));
}

.mg-autoav-estado {
    display: inline-block;
    align-self: flex-start;
    margin: 4px 0 0 8px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--mg-gold);
    color: var(--mg-navy);
    font-size: 12px;
    font-weight: 700;
    vertical-align: middle;
}

.mg-autoav-resultado li .mg-autoav-estado { margin: 0; flex: none; font-size: 14px; }

.mg-autoav-estado.is-ok { background: var(--mg-blue); color: #fff; }

/****************************************************************************/
/* Precisas axuda? (caixa do asistente)                                     */
/****************************************************************************/

.mg-axuda {
    padding: var(--mg-esp-l) 16px;
}

.mg-axuda-box {
    position: relative;
    max-width: calc(1538 * var(--mg-px));
    margin: 0 auto;
    padding: calc(46 * var(--mg-px)) calc(73 * var(--mg-px)) calc(46 * var(--mg-px)) calc(43 * var(--mg-px));
    border: 2px solid var(--mg-navy);
    border-radius: calc(16 * var(--mg-px));
}

.mg-axuda-bubble {
    position: relative;
    margin: 0 0 calc(18 * var(--mg-px));
    padding: calc(26 * var(--mg-px)) calc(56 * var(--mg-px));
    border: 2px solid var(--mg-navy);
    border-radius: 6px 6px 6px 0;
}

/* Pico do bocadillo, abaixo á esquerda */
.mg-axuda-bubble::after {
    content: '';
    position: absolute;
    left: -2px;
    bottom: -22px;
    width: 24px;
    height: 22px;
    border-left: 2px solid var(--mg-navy);
    background: linear-gradient(to bottom right, #fff calc(50% - 1px), var(--mg-navy) calc(50% - 1px), var(--mg-navy) calc(50% + 1px), transparent calc(50% + 1px));
}

.mg-axuda-bubble h2 {
    margin: 0;
    color: var(--mg-navy);
    font-size: max(20px, calc(32 * var(--mg-px)));
}

.mg-axuda-chips {
    display: flex;
    flex-wrap: wrap;
    gap: calc(24 * var(--mg-px));
    margin: 0 0 0 calc(110 * var(--mg-px));
}

/* Conversa: ocupa o oco de 200 px do PDF entre os chips e o campo, baleira ou non; con moitas mensaxes, scroll */
.mg-axuda-log {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: calc(200 * var(--mg-px));
    max-height: min(480px, 60vh);
    max-height: min(480px, 60dvh);
    max-width: calc(1320 * var(--mg-px));  /* remata onde o campo da pregunta */
    padding-left: calc(110 * var(--mg-px));
    padding-top: 20px;
    padding-bottom: 20px;
    overflow-y: auto;  /* tamén mentres medra animada (js/index.js): as mensaxes non pisan o campo */
    overscroll-behavior: contain;
    mask-image: linear-gradient(transparent, #000 20px);  /* ao facer scroll, as de arriba esvaécense baixo os chips en vez de cortarse */
}

/* Centradas no oco mentres caben; con justify-content: center, ao facer scroll cortábase o principio */
.mg-axuda-log > :first-child { margin-top: auto; }
.mg-axuda-log > :last-child { margin-bottom: auto; }

.mg-msg {
    max-width: 70%;
    margin: 0;
    padding: 10px 20px;
    border-radius: 18px;
    font-size: max(16px, calc(20 * var(--mg-px)));
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.mg-msg-eu {
    align-self: flex-end;
    border-bottom-right-radius: 4px;
    background: var(--mg-navy);
    color: #fff;
}

.mg-msg-bot {
    align-self: flex-start;
    border-bottom-left-radius: 4px;
    background: var(--mg-bg-light);
    color: var(--mg-navy);
    white-space: pre-line;  /* as listas da resposta veñen en liñas */
}

.page-mg .mg-msg-bot a { color: var(--mg-blue); text-decoration: underline; }
.mg-msg-escribindo { color: var(--mg-text-muted); }

.mg-axuda-nota a { color: inherit; text-decoration: underline; }
.page-mg .mg-axuda-nota { margin: 16px 0 0; }  /* con menos, o anel de foco do campo pisaba o texto */
.mg-axuda-nota {
    max-width: calc(1320 * var(--mg-px));
    padding: 0 calc(28 * var(--mg-px));
    color: var(--mg-text-muted);
    font-size: 14px;
    line-height: 1.4;
}

.mg-chip {
    padding: calc(6 * var(--mg-px) + var(--mg-optico)) calc(48 * var(--mg-px)) calc(6 * var(--mg-px) - var(--mg-optico));
    border: 2px solid var(--mg-navy);
    border-radius: 999px;
    background: #fff;
    color: var(--mg-navy);
    font-size: max(14px, calc(20 * var(--mg-px)));
    font-weight: 700;
    transition: background-color .2s ease, color .2s ease, opacity .2s ease, transform .16s var(--mg-ease-out);
}

/* :hover só co rato e :focus-visible só co teclado: no móbil quedaban pegados e parecían dous chips activos */
.mg-chip.active,
.mg-chip:focus-visible {
    background: var(--mg-navy);
    color: #fff;
}

@media (hover: hover) and (pointer: fine) {
    .mg-chip:hover { background: var(--mg-navy); color: #fff; }
}

.mg-chip:active { transform: scale(.97); }

/* Mentres chega unha resposta os demais chips non reaccionan (nin ao rato): se non, o premido e o que se toca parecían dous activos */
.mg-chip[aria-disabled="true"]:not(.active) { opacity: .55; cursor: default; }
.mg-chip[aria-disabled="true"]:not(.active):hover { background: #fff; color: var(--mg-navy); }
.mg-chip[aria-disabled="true"]:active { transform: none; }

.mg-axuda-input {
    display: block;
    width: calc(1320 * var(--mg-px));
    max-width: 100%;
    height: max(44px, calc(65 * var(--mg-px)));
    padding: 0 calc(28 * var(--mg-px));
    border: 2px solid var(--mg-navy);
    border-radius: 999px;
    font-size: max(16px, calc(20 * var(--mg-px)));
    text-overflow: ellipsis;  /* se o texto de axuda non cabe, remata en "…" e non cortado a media palabra */
}

.mg-axuda-input::placeholder { color: var(--mg-text-muted); }

/* Icona do asistente: fixa no canto ao facer scroll */
.mg-bot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--mg-blue);
    color: #fff;
    font-size: 24px;
    box-shadow: 0 4px 14px rgba(7, 56, 86, .25);
    transition: transform .2s var(--mg-ease-out), opacity .2s ease, visibility .2s;
}

.mg-bot:hover,
.mg-bot:focus {
    color: #fff;
    text-decoration: none;
}

.mg-bot:active { transform: scale(.95); }

.mg-bot-fixed {
    position: fixed;
    right: calc(max(16px, calc(74 * var(--mg-px))) + env(safe-area-inset-right, 0px));
    bottom: calc(max(16px, calc(40 * var(--mg-px))) + env(safe-area-inset-bottom, 0px));
    z-index: 1000;
    transition: opacity .2s ease, visibility .2s;
}

.mg-bot-fixed.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

@media (max-width: 767px) {
    .mg-axuda-box { max-width: none; padding: 24px 16px; }
    /* 30 px: o pico do bocadillo baixa 22 px e, sen a sangría dos chips de escritorio, pisaba o primeiro */
    .mg-axuda-bubble { margin-bottom: 30px; padding: 16px 20px; }
    .mg-axuda-chips { gap: 12px; margin: 0; }
    .mg-axuda-log { min-height: var(--mg-esp-l); max-width: none; padding-left: 0; }
    .mg-msg { max-width: 85%; }
    .mg-chip { padding: calc(6px + var(--mg-optico)) 20px calc(6px - var(--mg-optico)); }
    .mg-axuda-input { width: 100%; padding: 0 20px; }
    .mg-axuda-nota { max-width: none; padding: 0 20px; }
}

/* A 320 px "Escribe aquí as túas dúbidas" non collía: menos marxes, e a letra segue en 16 px (con menos, iOS achega a páxina) */
@media (max-width: 359px) {
    .mg-axuda { padding-left: 12px; padding-right: 12px; }
    .mg-axuda-box { padding-left: 12px; padding-right: 12px; }
    .mg-axuda-input { padding: 0 14px; }
}

/* Contacto: o chat é a única cousa da páxina; a mesma forma ca o panel que se abre polo resto da web, máis ancho e centrado, con cabeceira azul sobre fondo claro */
body.page-contacto { display: flex; flex-direction: column; min-height: 100svh; background: var(--mg-bg-light); }  /* o pé abaixo: en pantallas altas quedaba unha franxa baleira debaixo */
body.page-contacto main { flex: 1; }
.page-contacto .mg-axuda { padding-top: var(--mg-esp-m); padding-bottom: var(--mg-esp-m); background: var(--mg-bg-light); }
.page-contacto .mg-axuda-box {
    display: flex;
    flex-direction: column;
    max-width: 720px;
    height: min(680px, calc(100vh - 300px));  /* cabeceira enteira (220) e ocos: o aviso queda á vista sen baixar */
    height: min(680px, calc(100dvh - 300px));
    min-height: 460px;
    padding: 0 24px 18px;
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 8px 28px rgba(7, 56, 86, .14);
}
.page-contacto .mg-axuda-bubble { display: flex; flex: none; align-items: center; gap: 12px; margin: 0 -24px; padding: 14px 24px; border: 0; background: var(--mg-navy); }
.mg-axuda-avatar { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--mg-blue); font-size: 20px; }
.page-contacto .mg-axuda-bubble::after { display: none; }
.page-mg.page-contacto .mg-axuda-bubble h2 { color: #fff; font-size: 20px; line-height: 1.3; }
.page-contacto .mg-axuda-log { flex: 1 1 auto; min-height: 0; max-width: none; max-height: none; margin: 0 0 12px; padding: 20px 0 4px; }
.page-contacto .mg-axuda-log > :first-child { margin-top: 0; }
.page-contacto .mg-msg { max-width: 80%; padding: 10px 16px; font-size: 16px; }
.page-contacto .mg-axuda-form { display: flex; flex: none; gap: 8px; }
.page-contacto .mg-axuda-input { flex: 1; width: auto; min-width: 0; height: 48px; padding: 0 18px; font-size: 16px; }
.page-contacto .mg-axuda-enviar { display: grid; flex: none; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--mg-navy); color: #fff; }
.page-contacto .mg-axuda-enviar:active { transform: scale(.95); }
.page-contacto .mg-axuda-enviar:focus-visible { outline: 3px solid var(--mg-gold); outline-offset: 2px; }
.page-mg.page-contacto .mg-axuda-nota { flex: none; max-width: none; margin: 12px 0 0; padding: 0; font-size: 12px; line-height: 1.35; }
.page-contacto .is-conversa .mg-axuda-nota-resto,
.page-contacto .is-teclado .mg-axuda-nota-resto { display: none; }
/* Sen conversa, a caixa só co campo; ao preguntar medra. O rexistro queda con alto 0, non oculto, para que o lector de pantalla siga anunciando as respostas */
.page-contacto #axuda:not(.is-conversa):not(.is-teclado) .mg-axuda-box { height: auto; min-height: 0; }
.page-contacto #axuda:not(.is-conversa):not(.is-teclado) .mg-axuda-log { flex: none; height: 0; min-height: 0; margin: 0; padding: 0; }
.page-contacto #axuda:not(.is-conversa):not(.is-teclado) .mg-axuda-form { margin-top: 20px; }
/* Formación: as tarxetas de Administración, de tres en tres, co enlace ao pé do texto */
.page-formacion .mg-admin-historia-intro p + p { margin-top: 16px; }
/* A foto de "Recursos formativos" enche o alto do texto, no mesmo sitio: antes quedaba máis baixa e con aire arriba e abaixo */
@media (min-width: 992px) {
    .page-formacion .mg-admin-historia-intro { align-items: stretch; }
    .page-formacion .mg-admin-historia-intro > .mg-foto { display: block; }
    .page-formacion .mg-admin-historia-intro img { height: 100%; object-position: 35% center; }
}
/* Cursos do campus: o botón da cabeceira abre as tarxetas debaixo. Pregados non deixan oco nin se chega a eles co teclado (visibility) */
.mg-cursos-boton { display: inline-flex; align-items: center; gap: 12px; min-height: 46px; margin-top: var(--mg-esp-s); padding: calc(2 * var(--mg-optico)) 24px 0; border: 0; border-radius: 999px; background: var(--mg-blue); color: #fff; font-weight: 700; transition: background-color .2s ease; }
.mg-cursos-boton svg { width: 14px; height: 14px; transition: transform .25s var(--mg-ease-out); }
.mg-cursos-boton span:nth-child(2),
.mg-cursos-boton[aria-expanded="true"] span:first-child { display: none; }
.mg-cursos-boton[aria-expanded="true"] span:nth-child(2) { display: inline; }
.mg-cursos-boton[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .mg-cursos-boton:hover { background: var(--mg-navy); } }
.page-formacion .mg-cursos { padding-top: 0; }
.mg-cursos-pregable { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .35s var(--mg-ease-out), visibility 0s .35s; }
.mg-cursos-pregable.is-open { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .35s var(--mg-ease-out); }
.mg-cursos-pregable > div { min-height: 0; overflow: hidden; }  /* un div: a .container, coas marxes auto, ensanchábase co carrusel do móbil */
.mg-cursos-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px; margin-top: var(--mg-esp-m); }
.mg-cursos-panel { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 40px 32px; border-radius: 16px; background: var(--mg-navy); }
.page-mg .mg-cursos-panel h2 { margin: 0 0 16px; color: #fff; }
.page-mg .mg-cursos-panel p { margin: 0 0 28px; color: #fff; }
.mg-cursos-panel .mg-btn-branco { min-height: 46px; padding: calc(2 * var(--mg-optico)) 24px 0; font-size: 16px; font-weight: 700; }
.mg-cursos-lista { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.mg-curso { display: grid; grid-template-columns: 190px minmax(0, 1fr); overflow: hidden; border-radius: 12px; background: var(--mg-bg-light); }
.mg-curso-icona { display: grid; place-items: center; min-height: 150px; background: var(--mg-blue); color: #fff; }
.mg-curso:nth-child(2) .mg-curso-icona { background: var(--mg-navy); }
.mg-curso-icona svg { width: 72px; height: 72px; }
.mg-curso-texto { align-self: center; padding: 16px 20px; }
.page-mg .mg-curso h3 { margin: 0 0 6px; color: var(--mg-navy); font-size: 17px; line-height: 1.25; }
.page-mg .mg-curso p { margin: 0; color: var(--mg-navy); font-size: 15px; line-height: 1.4; }
.mg-curso-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.mg-curso-etiquetas li { max-width: 100%; overflow-wrap: anywhere; padding: 3px 10px; border-radius: 999px; background: #fff; color: var(--mg-navy); font-size: 13px; font-weight: 600; }
.mg-curso .mg-link-arrow { gap: 12px; margin-top: 10px; font-size: 15px; }
.mg-curso .mg-arrow { width: 32px; }
@media (max-width: 991px) { .mg-cursos-grid { grid-template-columns: minmax(0, 1fr); } }  /* en tableta o panel estirábase moito ao lado das filas */
@media (prefers-reduced-motion: reduce) { .mg-cursos-pregable, .mg-cursos-boton svg { transition: none; } }
@media (max-width: 767px) {
    .mg-cursos-boton { width: 100%; justify-content: center; }
    .mg-cursos-panel { padding: 28px 22px; }
    .mg-curso { grid-template-columns: minmax(0, 1fr); }
    .mg-curso-icona { min-height: 110px; }
    .mg-curso-texto { padding: 14px 16px 6px; }
    .mg-curso .mg-link-arrow { min-height: 44px; margin-top: 4px; }  /* o dedo */
}
/* Contactos oficiais debaixo do chat: o mesmo ancho ca a caixa */
.mg-contactos { overflow: hidden; max-width: 720px; margin: 0 auto var(--mg-esp-m); border-radius: 18px; background: #fff; box-shadow: 0 8px 28px rgba(7, 56, 86, .14); color: var(--mg-navy); }
.page-mg .mg-contactos h2 { display: flex; align-items: center; min-height: 68px; margin: 0; padding: 14px 24px; background: var(--mg-navy); color: #fff; font-size: 20px; line-height: 1.3; }
.mg-contacto { padding: 20px 24px; overflow-wrap: anywhere; }
.page-mg .mg-contacto h3 { margin: 0 0 10px; font-size: 18px; line-height: 1.3; }
.page-mg .mg-contacto p { margin: 0 0 6px; font-size: 15px; line-height: 1.45; }
.page-mg .mg-contacto p:last-child { margin: 8px 0 0; }
.mg-contacto a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.mg-contacto a[href^="tel:"] { white-space: nowrap; }  /* un teléfono non se parte en dúas liñas */
.mg-contacto a:focus-visible { outline: 3px solid var(--mg-gold); outline-offset: 2px; }

/* Contacto en escritorio: chat e outras formas de contacto ao carón */
@media (min-width: 992px) {
    .mg-contacto-colunas { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: start; width: 100%; max-width: 970px; margin: 0 auto; padding: var(--mg-esp-m) 0; }
    .mg-contacto-colunas:not(:has(#axuda.is-conversa)) { align-items: stretch; }  /* ao preguntar, o chat medra e a tarxeta queda co seu alto */
    .page-contacto .mg-contacto-colunas .mg-axuda { padding: 0; }
    .page-contacto .mg-contacto-colunas .mg-axuda-box { max-width: none; margin: 0; }
    .page-contacto .mg-contacto-colunas #axuda:not(.is-conversa) .mg-axuda-box { height: 100%; }
    .mg-contacto-colunas .mg-contactos { max-width: none; margin: 0; }
}
@media (max-width: 767px) {
    .page-contacto .mg-axuda { padding: 12px; }
    .mg-contactos { margin: 0 12px var(--mg-esp-m); }
    .page-mg .mg-contactos h2 { min-height: 64px; padding: 12px 14px; }
    .mg-contacto { padding: 16px 14px; }
    .mg-contacto a { display: inline-block; padding: 8px 0; }  /* o dedo: máis alto sen cambiar o texto */
    .page-contacto .mg-axuda-bubble { margin: 0 -14px; padding: 12px 14px; }
    .page-contacto .mg-axuda-box { max-width: none; height: calc(100vh - 110px); height: calc(100dvh - 110px); min-height: 420px; padding: 0 14px 14px; }
    .page-contacto .mg-msg { max-width: 88%; padding: 10px 14px; }
    /* Co teclado aberto (js/index.js): o chat enche o oco visible, coma a folla, e o fondo tapa a páxina: o pé xa non asoma entre o campo e o teclado */
    .page-contacto .is-teclado::before { content: ''; position: fixed; inset: 0; z-index: 2999; background: var(--mg-bg-light); }
    .page-contacto .is-teclado .mg-axuda-box { position: fixed; left: 0; right: 0; z-index: 3000; min-height: 0; border-radius: 18px 18px 0 0; }
}

/****************************************************************************/
/* Portada: un só eixo á esquerda e á dereita (escritorio)                  */
/****************************************************************************/

/* Cada sección da portada ía colocada sobre o lenzo do PDF e non no ancho do .container, así que o texto empezaba en
   posicións distintas. Aquí todo o que sobresaía pasa ao ancho do contido (315-1605 no lenzo de 1920), o do .container.
   Vai despois de todas as súas seccións (mesma especificidade: manda a última) e só desde 1200 px: por debaixo cada
   sección ten xa o seu deseño en fluxo */
@media (min-width: 1200px) {
    .mg-hero { padding-left: calc(var(--mg-marxe) + 315 * var(--mg-px)); }
    .mg-frase { padding-left: calc(var(--mg-marxe) + 315 * var(--mg-px)); }
    .mg-perfis-row,
    .mg-axuda-box { max-width: calc(1290 * var(--mg-px)); }
    .mg-intro h2,
    .mg-beneficios h2 { padding-left: 0; }
    .mg-beneficios-list { padding-left: 0; }
    .mg-rede-selo { left: calc(315 * var(--mg-px)); }
    .mg-rede-text { left: calc(801 * var(--mg-px)); width: calc(804 * var(--mg-px)); }
    .mg-selo-map { left: calc(var(--mg-marxe) + 315 * var(--mg-px)); }
    .mg-selo-text { right: calc(var(--mg-marxe) + 315 * var(--mg-px)); }
}

/* Tablet: a caixa do chat ao ancho do contido do .container (720 e 940 px), coma o formulario e o resto das seccións */
@media (min-width: 768px) and (max-width: 991px) { .mg-axuda-box { max-width: 720px; } }
@media (min-width: 992px) and (max-width: 1199px) { .mg-axuda-box { max-width: 940px; } }

/****************************************************************************/
/* Información legal (legal.php): só texto, sen deseño no PDF               */
/****************************************************************************/

.mg-legal { padding: var(--mg-esp-m) 0; }

/* h3 por debaixo do h2 (sen isto quedaba nos 24 px do navegador, maior ca o h2 no móbil) */
.page-mg .mg-legal h3 { font-size: max(18px, calc(28 * var(--mg-px))); }

/* Táboa de cookies (aviso-legal.php): desprázase soa se non cabe no móbil */
.mg-legal-taboa {
    margin-bottom: 16px;
    overflow-x: auto;
}

.mg-legal table {
    width: 100%;
    border-collapse: collapse;
}

.mg-legal th,
.mg-legal td {
    padding: 12px 16px 12px 0;
    border-bottom: 1px solid rgba(7, 56, 86, .15);
    text-align: left;
    vertical-align: top;
}

.mg-legal th { color: var(--mg-navy); }

/* Ligazóns dentro do texto: só coa cor non se distinguían (as de .mg-legal-ligazons xa van en fila propia) */
.mg-legal :is(p, td, :not(.mg-legal-ligazons) > li) a { text-decoration: underline; }

@media (max-width: 767px) {
    .mg-legal table { font-size: 14px; }
    .mg-legal th,
    .mg-legal td { padding-right: 8px; }
}

/****************************************************************************/
/* Mapa do portal (mapa.php): sen deseño no PDF; tarxetas coma os           */
/* itinerarios de Formación (fondo azul claro e borde azul abaixo)          */
/****************************************************************************/

.mg-mapa-portal { padding: var(--mg-esp-m) 0 var(--mg-esp-l); }

.mg-mapa-portal-intro {
    margin-bottom: var(--mg-esp-s);
    color: var(--mg-text-muted);
}

.mg-mapa-portal-lista {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: max(20px, calc(48 * var(--mg-px)));
    margin: 0;
    padding: 0;
    list-style: none;
}

.mg-mapa-portal-lista > li {
    padding: max(24px, calc(40 * var(--mg-px))) max(20px, calc(48 * var(--mg-px)));
    border-bottom: max(8px, calc(15 * var(--mg-px))) solid var(--mg-blue);
    background: var(--mg-bg-light);
    color: var(--mg-navy);
}

.page-mg .mg-mapa-portal h2 { font-size: max(20px, calc(32 * var(--mg-px))); }

/* Frecha sempre ao bordo dereito: "Información legal" parte en dúas liñas e a frecha quedaba solta.
   Recheo e marxe negativa: 44 px para o dedo sen mover nada */
.mg-mapa-portal h2 .mg-link-arrow {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    margin: -10px 0;
}

.page-mg .mg-mapa-portal-lista p { font-size: max(15px, calc(20 * var(--mg-px))); }

.mg-mapa-portal-lista ul,
.mg-legal-ligazons {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Seccións da páxina (e ligazóns relacionadas de accesibilidade.php): unha por liña, separadas por un fío */
.mg-mapa-portal-lista ul a,
.mg-legal-ligazons a {
    display: block;
    padding: 10px 0;
    border-top: 1px solid rgba(7, 56, 86, .15);
    color: var(--mg-navy);  /* o azul sobre o azul claro queda en 4,06:1 (AA pide 4,5) */
    font-weight: 700;
    transition: color .2s ease;
}

.mg-mapa-portal-lista ul a:hover,
.mg-mapa-portal-lista ul a:focus,
.mg-legal-ligazons a:hover,
.mg-legal-ligazons a:focus {
    color: var(--mg-navy);
    text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
    .mg-mapa-portal-lista ul a:hover,
    .mg-legal-ligazons a:hover { color: var(--mg-blue); }
}

@media (max-width: 991px) {
    .mg-mapa-portal-lista { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    .mg-mapa-portal-lista { grid-template-columns: 1fr; }
}

/****************************************************************************/
/* Pé de páxina                                                             */
/****************************************************************************/

/* Pé baixo, nunha soa franxa: logos á esquerda e ligazóns á dereita; debaixo, a frase legal. Medidas en px do lenzo de 1920;
   de ancho, o do .container (así o pé queda aliñado coa cabeceira e o contido) */
.mg-footer {
    background: var(--mg-blue);
    color: #fff;
    padding: calc(31 * var(--mg-px)) 0 calc(22 * var(--mg-px));
}

.mg-footer-arriba {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.mg-footer-logos {
    display: flex;
    flex: none;
    align-items: center;
    gap: 14px calc(40 * var(--mg-px));
}

.mg-footer .mg-logo-xunta { height: max(36px, calc(62 * var(--mg-px))); }
.mg-footer .mg-logo-xacobeo { height: max(21px, calc(35 * var(--mg-px))); }
.mg-footer .mg-logo-comercio { height: max(38px, calc(66 * var(--mg-px))); }

.mg-footer-legal { flex: 1 1 0; min-width: 0; font-size: max(12px, calc(21 * var(--mg-px))); text-align: right; }  /* se non cabe nunha liña, as ligazóns parten á dereita dos logos en vez de baixar */

.mg-footer-legal ul { margin: 0; padding: 0; list-style: none; }
.mg-footer-legal li { display: inline-block; }
/* o guión vai co elemento anterior: ao partir a liña nunca empeza por "-" */
.mg-footer-legal li:not(:last-child)::after { content: "\00a0-"; }

.page-mg .mg-footer-cc {
    margin: calc(22 * var(--mg-px)) 0 0;
    padding-top: calc(17 * var(--mg-px));
    border-top: 1px solid rgba(255, 255, 255, .35);
    font-size: max(12px, calc(18 * var(--mg-px)));
}
.mg-footer-cc .mg-icona { font-size: 1.3em; vertical-align: -.3em; }

.page-mg .mg-footer a { color: #fff; text-decoration: none; }
.page-mg .mg-footer a:hover { text-decoration: underline; }
.page-mg .mg-footer a:focus-visible { outline-color: #fff; }


/* En pantallas grandes o pé é máis ancho ca a cabeceira (de intento): así as ligazóns caben nunha liña xunto aos logos */
@media (min-width: 1600px) {
    .page-mg .mg-footer .container { width: 1215px; }
}

@media (max-width: 767px) {
    .mg-footer { padding: 28px 0 24px; }
    .mg-footer-arriba { flex-direction: column; align-items: stretch; gap: 0; }

    /* Xunta e Xacobeo nunha fila, coma o pé de comercio.xunta.gal (que non leva o logo de Comercio Galego; en móbil xa vai na cabeceira):
       anchos en % (adáptanse de 320 a 767 px) con tope para que non crezan na tableta */
    .mg-footer-logos { flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 8px; padding-bottom: 20px; }
    .mg-footer .mg-logo-xunta { width: 40%; max-width: 190px; height: auto; }
    .mg-footer .mg-logo-xacobeo { width: 44%; max-width: 200px; height: auto; }
    .mg-footer .mg-logo-comercio { display: none; }

    .mg-footer-legal { flex: none; width: 100%; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .3); font-size: 14px; text-align: left; }
    /* dúas columnas, 44 px de alto cada enlace: o toque acerta */
    .mg-footer-legal ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
    .mg-footer-legal li { display: block; line-height: 1.2; }
    .mg-footer-legal li a { display: block; padding: 14px 0; }
    .mg-footer-legal li:not(:last-child)::after { content: none; }
    .page-mg .mg-footer-cc { margin-top: 6px; padding-top: 14px; font-size: 14px; }
}

/****************************************************************************/
/* Mercados: mapa e filtros                                                 */
/****************************************************************************/

.mg-mapa-section {
    padding: var(--mg-esp-m) 0 0;
}

.page-mg .mg-mapa-title {
    margin-bottom: calc(50 * var(--mg-px));
    color: var(--mg-navy);
    text-align: center;
}

.mg-mapa-wrap { position: relative; }

/* Filtros sen ningún mercado: sobre o mapa baleiro (por riba dos controis de Leaflet) */
.page-mg .mg-mapa-baleiro {
    position: absolute;
    z-index: 1000;
    top: 50%;
    left: 50%;
    width: max-content;
    max-width: 90%;
    margin: 0;
    padding: calc(12px + var(--mg-optico)) 20px calc(12px - var(--mg-optico));
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 18px rgba(7, 56, 86, .2);
    color: var(--mg-navy);
    font-weight: 700;
    text-align: center;
    transform: translate(-50%, -50%);
}

.mg-mapa {
    height: calc(733 * var(--mg-px));
    min-height: 420px;
    background: #fff;
    z-index: 0;
}

/* Marcadores */
.mg-marker { background: none; border: 0; }

.mg-marker-selo img {
    width: 100%;
    height: 100%;
    display: block;
    transition: transform .2s var(--mg-ease-out);
}

.mg-marker-sen-selo span {
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--mg-blue);
    box-shadow: 0 0 0 6px rgba(0, 123, 196, .35);
    transform: scale(.6);
    transition: transform .2s var(--mg-ease-out);
}

.mg-marker.is-active img { transform: scale(1.35); }
.mg-marker.is-active span { transform: scale(.85); }

/* Grupo de mercados próximos (Leaflet.markercluster): círculo co número */
.mg-cluster {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--mg-navy);
    box-shadow: 0 0 0 6px rgba(7, 56, 86, .25);
    color: #fff;
    font: 700 15px var(--mg-font);
    /* Sen efecto ao pasar o rato: escalar (transform ou scale) move o círculo, porque Leaflet o coloca cun transform,
       e o número fuxía do cursor ao ir premelo */
}

/* Os números dos grupos por riba dos selos: no móbil un selo tapaba o número. !important: Leaflet pon o z-index en liña */
.leaflet-marker-icon.mg-cluster { z-index: 1000 !important; }

/* Nome de cada concello, só ao achegarse (js/mercados.js) */
.mg-nome-concello {
    color: #6f6f6f;
    font: 11px/16px var(--mg-font);
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
}

/* A fonte da web tamén no mapa: o Leaflet trae a súa */
.leaflet-container { font-family: var(--mg-font); }

/* Controis de zoom do Leaflet co estilo dos filtros */
.mg-mapa .leaflet-control-zoom {
    border: 0;
    margin: calc(54 * var(--mg-px)) calc(30 * var(--mg-px)) 0 0;
}

.mg-mapa .leaflet-control-zoom a {
    width: 34px;
    height: 34px;
    line-height: 36px;  /* máis ca o alto: coa Xunta Sans o + e o - quedaban 2 px altos */
    margin-bottom: 8px;
    border: 1px solid #9e9e9e;
    border-radius: 4px;
    color: var(--mg-navy);
    font-family: var(--mg-font);
    font-weight: 400;
}

.mg-mapa-filtros {
    position: absolute;
    top: calc(54 * var(--mg-px));
    right: calc(140 * var(--mg-px));
    z-index: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(14 * var(--mg-px));
}

.mg-mapa-filtros-selo {
    display: flex;
    gap: calc(20 * var(--mg-px));
}

.mg-filtro {
    display: inline-flex;
    align-items: center;
    gap: calc(14 * var(--mg-px));
    padding: calc(6 * var(--mg-px)) calc(46 * var(--mg-px));
    border: 1px solid #9e9e9e;
    border-radius: 999px;
    background: #fff;
    color: var(--mg-navy);
    font-size: max(13px, calc(16 * var(--mg-px)));
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .16s var(--mg-ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .mg-filtro:hover { border-color: var(--mg-navy); }
}
.mg-filtro:active { transform: scale(.97); }

.mg-filtro.active {
    background: var(--mg-navy);
    border-color: var(--mg-navy);
    color: #fff;
    font-weight: 700;
}

/* Reserva o ancho do texto en negriña: ao cambiar de filtro os botóns medraban ou minguaban e movían os veciños */
.mg-filtro-texto { display: inline-grid; translate: 0 var(--mg-optico); }

.mg-filtro-texto::after {
    content: attr(data-texto);
    height: 0;
    overflow: hidden;
    visibility: hidden;
    font-weight: 700;
}

.mg-filtro-dot {
    width: calc(26 * var(--mg-px));
    height: calc(26 * var(--mg-px));
    min-width: 12px;
    min-height: 12px;
    border-radius: 50%;
}

.mg-filtro-dot-gold { background: var(--mg-gold-light); }
.mg-filtro-dot-blue { background: var(--mg-blue); }

/* Select nativo con aspecto de píldora; o chevron é img/iconas/chevron-down.svg en azul escuro */
.mg-filtro-provincia {
    width: calc(176 * var(--mg-px));
    min-width: 130px;
    padding: calc(6 * var(--mg-px)) 30px calc(6 * var(--mg-px)) calc(30 * var(--mg-px));
    border: 1px solid #9e9e9e;
    border-radius: 999px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23073856' d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E") no-repeat right 14px center / 11px;
    color: var(--mg-navy);
    font-size: max(13px, calc(16 * var(--mg-px)));
    line-height: 1.42857;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

@media (hover: hover) and (pointer: fine) {
    .mg-filtro-provincia:hover { border-color: var(--mg-navy); }
}
.mg-filtro-provincia:focus-visible { outline: 2px solid var(--mg-blue); outline-offset: 2px; }

/* Sobre o mapa (escritorio): a caixa deixa pasar os clics aos marcadores dos ocos e só os recollen os botóns.
   Nunha columna, no oco á dereita de Galicia: en 3 columnas, como no PDF, tapaban marcadores do norte */
@media (min-width: 992px) {
    .mg-mapa-filtros {
        display: grid;
        grid-template-columns: auto;
        gap: calc(14 * var(--mg-px)) calc(20 * var(--mg-px));
        pointer-events: none;
    }

    .mg-mapa-filtros-selo { display: contents; }

    .mg-filtro,
    .mg-filtro-provincia { pointer-events: auto; }

    .mg-filtro { justify-content: center; }

    .mg-filtro-provincia { width: auto; min-width: 0; }
}

/* Ata tablet (991 px) os filtros van baixo o mapa: enriba tapaban marcadores e o botón + do zoom */
@media (max-width: 991px) {
    .page-mg .mg-mapa-title { margin-bottom: 24px; }

    /* No HTML os filtros van antes do mapa (orde do teclado); aquí vense debaixo */
    .mg-mapa-wrap { display: flex; flex-direction: column; }

    .mg-mapa-filtros {
        order: 1;
        position: static;
        align-items: stretch;
        margin-top: 16px;
        gap: 12px;
    }

    .mg-mapa-filtros-selo { gap: 8px; }
    /* Uns 44 px de alto: tamaño cómodo para o dedo */
    .mg-filtro { padding: 10px 14px; flex: 1 1 auto; justify-content: center; }
    /* 16 px: con menos, iOS achega toda a páxina ao tocar o select.
       20 px á esquerda: co alto de 45 px a curva do bordo é maior e cortaba a primeira letra */
    .mg-filtro-provincia { width: 100%; padding: 10px 30px 10px 20px; font-size: 16px; }
}

/****************************************************************************/
/* Mercados: ficha do mercado seleccionado                                  */
/****************************************************************************/

/* Ficha: ventá de Leaflet xunto ao marcador (js/mercados.js móvea alí). Caixa con bordo azul (sen selo) ou dourado (con selo),
   cunha frecha cara ao marcador. A ventá de Leaflet quédase sen fondo nin sombra: o aspecto é o desta caixa */
.mg-popup .leaflet-popup-content-wrapper { padding: 0; border-radius: 0; background: none; box-shadow: none; }
.mg-popup .leaflet-popup-content { margin: 0; line-height: 1.3; }
.mg-popup .leaflet-popup-tip { display: none; }

.mg-ficha {
    --mg-borde: var(--mg-blue);
    position: relative;
    padding: 14px;
    border: 2px solid var(--mg-borde);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(7, 56, 86, .25);
    font-family: var(--mg-font);
    transition: border-color .2s var(--mg-ease-out);  /* ao cambiar de mercado */
}

.mg-ficha::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -9px;
    width: 14px;
    height: 14px;
    border-right: 2px solid var(--mg-borde);
    border-bottom: 2px solid var(--mg-borde);
    background: #fff;
    transform: translateX(-50%) rotate(45deg);
}

.mg-ficha-selo { --mg-borde: var(--mg-gold); }

/* Pechar: círculo branco (agora que a foto vai debaixo, así sempre se ve) con 44 px de zona para o dedo */
.mg-ficha-pechar {
    position: absolute;
    z-index: 2;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--mg-navy);
    font-size: 20px;
    line-height: 28px;
    cursor: pointer;
}

.mg-ficha-pechar::before { content: ''; position: absolute; inset: -8px; }  /* 44 x 44 */
.mg-ficha-pechar { transition: transform 140ms var(--mg-ease-out); }
.mg-ficha-pechar:active { transform: scale(.9); }  /* .9 e non .97: con 28 px, o .97 non se vía */
.mg-ficha-pechar:focus-visible { outline: 2px solid var(--mg-blue); outline-offset: 2px; }

.mg-ficha-body { display: flex; flex-direction: column; gap: 10px; }

.mg-ficha-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* No móbil a ficha non é unha ventá: vai como tarxeta baixo o mapa e os filtros (js/mercados.js), sen frecha nin sombra */
.mg-ficha-caixa { margin-top: 24px; }
.mg-ficha-caixa[hidden] { display: none; }
.mg-ficha-caixa .mg-ficha { box-shadow: none; }
.mg-ficha-caixa .mg-ficha::after { display: none; }

/* Ao abrila (de hidden a visible) entra desde o mapa; ao cambiar de marcador coa ficha aberta só cambia o texto.
   Navegadores sen @starting-style (iOS < 17.5) amósana de golpe, coma antes */
@media (max-width: 767px) {
    .mg-ficha-caixa { transition: opacity 200ms var(--mg-ease-out), transform 200ms var(--mg-ease-out); }
    .mg-ficha-caixa .mg-ficha { scroll-margin-bottom: 88px; }  /* ao abrila baixa ata ela (mercados.js) e deixa sitio ao robot do chat: 56 px + 16 de marxe; se non, tapáballe o × */
    @starting-style { .mg-ficha-caixa { opacity: 0; transform: translateY(8px); } }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .mg-ficha-caixa { transition: opacity 200ms var(--mg-ease-out); }
    @starting-style { .mg-ficha-caixa { transform: none; } }
}

/* Marxe dereita: deixa sitio ao botón de pechar */
.page-mg .mg-ficha-info h2 {
    margin: 0 28px 6px 0;
    color: var(--mg-navy);
    font-size: 17px;
}

.mg-ficha-info p { margin: 0 0 4px; color: var(--mg-navy); font-size: 15px; }

/* Globo con texto ("Ver web"): só o globo non dicía a onde levaba. 44 px de alto para o dedo */
.mg-ficha-web {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    color: var(--mg-navy);
    font-size: 15px;
    font-weight: 700;
}

.mg-ficha-web .mg-icona { font-size: 20px; }

.mg-ficha-web[hidden],
.mg-selo-pill[hidden] { display: none; }

/* Pílula do selo (ficha grande e tarxetas pequenas) */
.mg-selo-pill {
    display: inline-block;
    /* Mínimo 10 px: escalado quedaba en 3 px no móbil e o texto tocaba a curva */
    padding: calc(2px + var(--mg-optico)) max(10px, calc(18 * var(--mg-px))) calc(2px - var(--mg-optico));
    border-radius: 999px;
    background: var(--mg-gold-light);
    color: var(--mg-text);
    font-size: max(11px, calc(12 * var(--mg-px)));
    font-weight: 700;
}

.mg-selo-pill-lg {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: calc(6px + var(--mg-optico)) 12px calc(6px - var(--mg-optico));
    background: var(--mg-gold);
    color: var(--mg-navy);
    font-size: 14px;
    text-align: center;
}


/****************************************************************************/
/* Mercados: grella de Mercados Excelentes                                  */
/****************************************************************************/

.page-mg .mg-mercados-grid-title {
    margin-bottom: var(--mg-esp-m);
    color: var(--mg-navy);
    text-align: center;
}

/* Grella de dúas columnas (unha en móbil) co mesmo oco de 30 px en horizontal e en vertical.
   Cada tarxeta ocupa catro filas (foto, título, lugar, selo) compartidas coa súa veciña (subgrid):
   así os textos quedan á mesma altura aínda que un título ocupe máis liñas que o outro */
.mg-mercados-lista {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    max-width: calc(1360 * var(--mg-px));
    margin: 0 auto;
    padding: 0 15px;
}

@media (min-width: 768px) {
    .mg-mercados-lista { grid-template-columns: 1fr 1fr; }
}

/* En tablet e móbil o contedor de Bootstrap ten ancho fixo e o tope escalado deixaba as tarxetas estreitas */
@media (max-width: 991px) {
    .mg-mercados-lista { max-width: none; padding: 0; }
}

.mg-mercado-card {
    grid-template-columns: minmax(0, 1fr);  /* sen isto, sen foto, a columna medra co contido e sae da grella */
    container-type: inline-size;  /* o selo vai ao lado do nome ou do lugar segundo o ancho da tarxeta (ver @container abaixo) */
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
    background: var(--mg-bg-light);
}

/* O selo, en dúas liñas (o óvalo pasa a esquinas redondeadas), á dereita e centrado no alto do nome e o lugar.
   Se o nome ou o lugar non caben ao seu lado, parten en dúas liñas (nunca se cortan con puntos suspensivos).
   O ano é o que cambia dun mercado a outro: vai grande, e "Selo" pequeno enriba: a tarxeta xa di "Mercado Excelente" */
.mg-mercado-card .mg-selo-pill {
    display: grid;
    justify-items: center;
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: end;
    padding: calc(8px + var(--mg-optico)) 18px calc(7px - var(--mg-optico));
    border-radius: 14px;
    color: var(--mg-navy);
    font-size: 15px;
    line-height: 1.15;
    text-align: center;
}

.mg-mercado-card .mg-selo-pill-titulo { font-size: 12px; }
.mg-mercado-card .mg-selo-pill b { font-size: 19px; }

.mg-mercado-card-img {
    display: block;
    width: 100%;
    aspect-ratio: 625 / 290;
    object-fit: cover;
}

.mg-mercado-card-body {
    display: grid;
    grid-row: span 2;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    grid-template-rows: subgrid;
    row-gap: 0;
    align-items: start;
    padding: calc(36 * var(--mg-px)) calc(48 * var(--mg-px));
    min-height: calc(195 * var(--mg-px));
}

.page-mg .mg-mercado-card-body h3 {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: calc(16 * var(--mg-px));
    color: var(--mg-navy);
    font-size: max(22px, calc(34 * var(--mg-px)));
    line-height: 1.2;
}

/* "Mercado Excelente Municipal", igual en todas: pequeno e máis suave enriba do concello */
.mg-mercado-card-pre {
    display: block;
    margin-bottom: 4px;
    color: var(--mg-text-suave);
    font-size: max(13px, calc(18 * var(--mg-px)));
    letter-spacing: .02em;
}

.mg-mercado-card-body p {
    grid-column: 1;
    grid-row: 2;
    margin-bottom: 0;
    color: var(--mg-navy);
    font-size: max(14px, calc(20 * var(--mg-px)));
}

@media (max-width: 767px) {
    .mg-mercado-card-body { padding: 20px 24px; min-height: 0; }
}

/* Tarxetas de menos de 450 px (móbil, tableta e escritorio ata ~1366 px): co selo ao lado do nome, "Mercado Excelente Municipal"
   partía en dúas liñas e "de Vilagarcía de Arousa" en catro a 320 px. O nome leva todo o ancho e o selo vai ao lado do lugar */
@container (max-width: 449px) {
    .page-mg .mg-mercado-card-body h3 { grid-column: 1 / -1; }
    .mg-mercado-card .mg-selo-pill { grid-row: 2; }
    .mg-mercado-card-body p { align-self: center; }  /* o lugar, centrado co selo */
}


/****************************************************************************/
/* Mercados: Aínda non tes un posto?                                        */
/****************************************************************************/

.mg-mercados-grid { padding-bottom: 0; }

.mg-posto { text-align: center; }

.mg-posto p {
    max-width: calc(600 * var(--mg-px));
    margin: 0 auto calc(40 * var(--mg-px));
    color: var(--mg-text-muted);
}

/* Ata tablet sen o ancho máximo escalado (en 768 px quedaban 240 px e tres liñas) */
@media (max-width: 991px) {
    .mg-posto p { max-width: none; }
}

/****************************************************************************/
/* Categorías de Formación e Recursos: cada unha fixa a súa cor en --mg-cat */
/****************************************************************************/

.mg-cat-introducion { --mg-cat: #b8c500; }
.mg-cat-dixitalizacion { --mg-cat: #9400c5; }
.mg-cat-boas-practicas { --mg-cat: #c50000; }
.mg-cat-produto { --mg-cat: #0d00c5; }
.mg-cat-excelentes { --mg-cat: #f6dc81; }
.mg-cat-turismo { --mg-cat: #00a7c5; }

/* Botón en pílula azul, ex. "Ver agora" */
.mg-btn-azul {
    display: inline-block;
    min-width: calc(218 * var(--mg-px));
    padding: calc(10 * var(--mg-px) + var(--mg-optico)) calc(40 * var(--mg-px)) calc(10 * var(--mg-px) - var(--mg-optico));
    border-radius: 999px;
    background: var(--mg-blue);
    color: #fff;
    font-weight: 700;
    text-align: center;
    transition: background-color .2s ease, transform .16s var(--mg-ease-out);
}

.mg-btn-azul:hover,
.mg-btn-azul:focus {
    color: #fff;
    text-decoration: none;
}

.mg-btn-azul:focus-visible { background: var(--mg-navy); }

@media (hover: hover) and (pointer: fine) {
    .mg-btn-azul:hover { background: var(--mg-navy); }
}

.mg-btn-azul:active { transform: scale(.97); }

/****************************************************************************/
/* Cabeceira das páxinas interiores (Formación, Recursos)                   */
/****************************************************************************/

.mg-cab-pax {
    position: relative;
    height: calc(573 * var(--mg-px));
    padding-top: calc(233 * var(--mg-px));
}

.page-mg .mg-cab-pax h1 {
    margin-bottom: calc(60 * var(--mg-px));
}

.mg-cab-pax p {
    max-width: calc(690 * var(--mg-px));
    color: var(--mg-text-muted);
}

.mg-cab-pax-fotos {
    position: absolute;
    top: 0;
    right: calc(var(--mg-marxe) + 194 * var(--mg-px));
    display: flex;
    gap: calc(18 * var(--mg-px));
    height: 100%;
}

.mg-cab-pax-fotos .mg-foto {
    width: calc(289 * var(--mg-px));
    height: 100%;
}

.mg-cab-pax-fotos img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/****************************************************************************/
/* Formación: vídeo destacado                                               */
/****************************************************************************/

.mg-destacado {
    display: grid;
    grid-template-columns: calc(653 * var(--mg-px)) 1fr;
    width: calc(1382 * var(--mg-px));
    height: calc(417 * var(--mg-px));
    margin: var(--mg-esp-l) auto 0;  /* entre seccións, o mesmo oco ca no resto da web */
    background: var(--mg-bg-light);
}

.mg-destacado > .mg-foto { height: 100%; }

.mg-destacado-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mg-destacado-texto {
    align-self: center;
    padding: 0 calc(60 * var(--mg-px)) 0 calc(147 * var(--mg-px));
    color: var(--mg-navy);
    font-size: max(15px, calc(20 * var(--mg-px)));
}

.page-mg .mg-destacado h2 {
    margin: 0 0 calc(52 * var(--mg-px));
    color: var(--mg-navy);
    font-size: max(18px, calc(24 * var(--mg-px)));
}

.page-mg .mg-destacado-meta { margin-bottom: calc(44 * var(--mg-px)); }

/****************************************************************************/
/* Formación: buscador, filtros e pílulas                                   */
/****************************************************************************/

.mg-formacion { padding-top: var(--mg-esp-l); }

/* O bloque de filtros, do ancho das pílulas (1621 px no PDF) e centrado coma elas */
.mg-filtros-lista { width: calc(1621 * var(--mg-px)); margin: 0 auto; }

/* input.: normalize.css pon content-box en input[type="search"] e o relleno saía do ancho (desbordaba no móbil) */
input.mg-buscador {
    display: block;
    box-sizing: border-box;
    width: 100%;  /* o ancho do bloque de filtros, que é o da lista de debaixo */
    height: max(44px, calc(65 * var(--mg-px)));
    padding: 0 calc(47 * var(--mg-px));
    border: 2px solid #9fc0d4;
    border-radius: 6px;
    background: var(--mg-bg-light);
    color: var(--mg-navy);
    font-size: 16px;  /* con menos, iOS achega a páxina ao escribir */
}

.mg-buscador::placeholder { color: var(--mg-navy); }

.mg-buscador:focus-visible { outline: 2px solid var(--mg-blue); outline-offset: 2px; }

/* Bloque simétrico: o buscador e cada fila de filtros ocupan o mesmo ancho ca a lista de debaixo.
   Cada fila é unha grella de 4 columnas iguais: "Todas…" na primeira e as opcións nas outras tres
   (a partir da segunda fila tamén empezan na columna 2), así os botóns de todas as filas quedan en columna.
   (No PDF van 4 + 2 con anchos distintos e o buscador a outro ancho) */
.mg-filtros-categoria {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: calc(21 * var(--mg-px)) calc(30 * var(--mg-px));
    margin-top: calc(44 * var(--mg-px));
}

.mg-filtros-cats { display: contents; }

.mg-filtros-cats > :nth-child(3n + 1) { grid-column-start: 2; }

.mg-filtros-categoria .mg-filtro {
    justify-content: center;
    width: 100%;
    min-height: max(44px, calc(55 * var(--mg-px)));
    padding: calc(6 * var(--mg-px)) calc(32 * var(--mg-px));
    line-height: 1.2;
    text-align: left;
}

.mg-filtros-cats .mg-filtro { justify-content: flex-start; padding-left: calc(15 * var(--mg-px)); padding-right: calc(15 * var(--mg-px)); }

/* Sen marcar: texto gris en negriña, como no PDF (marcado, o branco de .mg-filtro.active) */
.mg-filtros-cats .mg-filtro:not(.active) { color: var(--mg-text-muted); font-weight: 700; }

.mg-filtros-cats .mg-filtro-dot { flex: none; }

.mg-filtros-categoria .mg-filtro-dot { background: var(--mg-cat); }

.mg-pilulas {
    display: flex;
    flex-direction: column;
    gap: calc(90 * var(--mg-px));
    margin-top: calc(168 * var(--mg-px));
}

.mg-pilula {
    position: relative;
    display: grid;
    grid-template-columns: 1fr calc(765 * var(--mg-px));
    width: calc(1621 * var(--mg-px));
    min-height: calc(538 * var(--mg-px));
    margin: 0 auto;
}

.mg-pilula[hidden] { display: none; }

/* Barra da cor da categoría */
.mg-pilula::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: max(6px, calc(36 * var(--mg-px)));
    border-radius: calc(18 * var(--mg-px));
    background: var(--mg-cat);
}

.mg-pilula-texto {
    display: flex;
    flex-direction: column;
    padding: calc(62 * var(--mg-px)) calc(60 * var(--mg-px)) calc(62 * var(--mg-px)) calc(93 * var(--mg-px));
}

.page-mg .mg-pilula h3 {
    margin-bottom: calc(38 * var(--mg-px));
    font-size: max(18px, calc(24 * var(--mg-px)));
    text-transform: uppercase;
}

.mg-pilula-texto p {
    max-width: calc(661 * var(--mg-px));
    color: var(--mg-text-muted);
    font-size: max(15px, calc(20 * var(--mg-px)));
    line-height: 2;
}

/* Data abaixo de todo */
.page-mg .mg-pilula-meta {
    display: flex;
    gap: calc(64 * var(--mg-px));
    margin: auto 0 0;
    color: var(--mg-blue);
    font-size: max(13px, calc(16 * var(--mg-px)));
    line-height: 1.5;
}

.mg-pilula-meta span {
    display: inline-flex;
    align-items: center;
    gap: calc(28 * var(--mg-px));
}

.mg-pilula-meta .mg-icona { font-size: max(18px, calc(30 * var(--mg-px))); }

/* Foto do vídeo: esvaece pola esquerda cara ao texto e ten as esquinas da dereita redondeadas */
.mg-pilula-video {
    position: relative;
    overflow: hidden;
    border-radius: 0 calc(25 * var(--mg-px)) calc(25 * var(--mg-px)) 0;
}

.mg-pilula-video .mg-foto { position: absolute; inset: 0; }

.mg-pilula-video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .1), #000 32%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, .1), #000 32%);
}

.mg-pilula-play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(44px, calc(84 * var(--mg-px)));  /* 44 x 51: zona de toque, mesma proporción */
    height: max(51px, calc(97 * var(--mg-px)));
    padding: 0;
    border: 0;
    background: #fff;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    transform: translate(-40%, -50%);
}

.mg-pilula-play[aria-disabled="true"] { cursor: default; }

/* Vídeos de Formación: grella de tarxetas como as de Mercados Excelentes (vídeo arriba, texto debaixo), sen cor de categoría (reprodutor das pílulas) */
.mg-videos-formacion { padding: var(--mg-esp-m) 0 0; }  /* debaixo xa separa a marxe da frase (.mg-admin-frase) */

.mg-videos-lista {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mg-video-caixa {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 12px;
    background: var(--mg-bg-light);
}

.mg-video-caixa .mg-pilula-video { order: -1; height: auto; margin: 0; aspect-ratio: 16 / 9; border-radius: 0; }
.mg-video-caixa .mg-pilula-video img { -webkit-mask-image: none; mask-image: none; }

.mg-video-texto { padding: 20px 24px 24px; }

.mg-video-texto h3 {
    margin: 0 0 10px;
    color: var(--mg-navy);
    font-size: 20px;
    line-height: 1.3;
}

.mg-video-texto p {
    margin: 0;
    color: var(--mg-text-suave);
    font-size: 15px;
    line-height: 1.6;
}

/* Ventá onde se ven os vídeos de Formación (<dialog>, en js/index.js) */
.mg-video-ventana { width: min(1100px, 92vw); max-width: none; padding: 0; border: 0; overflow: visible; background: transparent; }
.mg-video-ventana::backdrop { background: rgba(7, 56, 86, .94); }  /* o título vai enriba: que non se transparente a páxina */
.mg-video-ventana video { display: block; width: 100%; max-height: 72vh; border-radius: 12px; background: #000; }
/* Pé: título do vídeo entre as frechas do carrusel de Inicio, en branco */
.mg-video-ventana-pe { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.mg-video-ventana-titulo { flex: 1; margin: 0; color: #fff; font-size: max(18px, calc(28 * var(--mg-px))); font-weight: 700; line-height: 1.25; text-align: center; }
.mg-video-ventana .mg-video-nav { position: relative; flex: none; top: auto; left: auto; right: auto; border-color: #fff; color: #fff; transform: none; }
.mg-video-ventana .mg-video-nav:active { transform: scale(.95); }
.mg-video-ventana .mg-video-nav:focus-visible { outline: 3px solid var(--mg-gold); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
    .mg-video-ventana .mg-video-nav:hover { background: #fff; color: var(--mg-navy); }
}
/* Móbil en horizontal: o vídeo ocupa case todo o alto e a X vai á súa dereita (enriba quedaba fóra da pantalla) */
@media (orientation: landscape) and (max-height: 500px) {
    .mg-video-ventana { width: fit-content; }
    .mg-video-ventana video { width: auto; height: calc(100dvh - 72px); max-width: calc(100vw - 120px); max-height: none; }
    .mg-video-ventana-pechar { top: 0; bottom: auto; right: auto; left: calc(100% + 10px); }
    .mg-video-ventana-pe { margin-top: 8px; }
}
.mg-video-ventana-pechar { position: absolute; right: 0; bottom: calc(100% + 12px); width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--mg-navy); font-size: 26px; line-height: 44px; cursor: pointer; }
.mg-video-ventana-pechar:focus-visible { outline: 3px solid var(--mg-gold); outline-offset: 2px; }

@media (min-width: 768px) {
    .mg-video-caixa .mg-pilula-play { width: 44px; height: 51px; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .35)); }  /* no móbil o botón xa é toda a foto */
}

@media (max-width: 991px) {
    .mg-videos-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .mg-videos-lista { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .mg-video-texto { padding: 16px 20px 20px; }
    .page-formacion .mg-video-caixa .mg-pilula-video { height: auto; aspect-ratio: 16 / 9; border-radius: 0; }  /* as pílulas do móbil deixan o vídeo en 84 px de alto */
}
}

.mg-pilula-video video,
.mg-pilula-video iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
}

.mg-filtros-baleiro {
    width: calc(1621 * var(--mg-px));
    margin: 0 auto;
    padding-left: calc(93 * var(--mg-px));
    color: var(--mg-text-muted);
}

/****************************************************************************/
/* Formación: itinerarios recomendados                                      */
/****************************************************************************/

/* Abaixo sen recheo: o bloque seguinte (posto.php) xa trae o seu oco; con ambos, o espazo saía dobre */
.mg-itinerarios { padding-bottom: 0; }

.mg-itinerarios h2,
.mg-itinerarios-intro { padding-left: calc(45 * var(--mg-px)); }

.page-mg .mg-itinerarios h2 { font-size: max(22px, calc(32 * var(--mg-px))); }

.page-mg .mg-itinerarios-intro {
    margin-bottom: calc(97 * var(--mg-px));
    color: var(--mg-text-muted);
    font-size: max(15px, calc(20 * var(--mg-px)));
}

.mg-itinerarios-lista {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(113 * var(--mg-px)) calc(208 * var(--mg-px));
}

/* Columna flex: a etiqueta vai antes do título no HTML (orde de lectura) e aquí debaixo, coma no PDF */
.mg-itinerario { display: flex; flex-direction: column; width: calc(534 * var(--mg-px)); }

.mg-itinerario-etiqueta { order: 1; }

.mg-itinerario img {
    display: block;
    width: 100%;
    height: auto;
}

.mg-itinerario-corpo {
    min-height: calc(258 * var(--mg-px));
    padding: calc(34 * var(--mg-px)) calc(48 * var(--mg-px));
    border-bottom: calc(15 * var(--mg-px)) solid var(--mg-blue);
    background: var(--mg-bg-light);
    color: var(--mg-navy);
}

.page-mg .mg-itinerario h3 {
    margin-bottom: calc(22 * var(--mg-px));
    color: var(--mg-navy);
    font-size: max(18px, calc(24 * var(--mg-px)));
}

.mg-itinerario ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: max(14px, calc(16 * var(--mg-px)));
    line-height: 1.25;
}

.mg-itinerario li {
    display: flex;
    align-items: center;
    gap: calc(17 * var(--mg-px));
}

.mg-itinerario li + li { margin-top: calc(24 * var(--mg-px)); }

.mg-itinerario li::before {
    translate: 0 calc(-1 * var(--mg-optico));
    content: '';
    flex: none;
    width: max(12px, calc(20 * var(--mg-px)));
    height: max(12px, calc(20 * var(--mg-px)));
    border-radius: 50%;
    background: var(--mg-cat);
}

.page-mg .mg-itinerario-etiqueta {
    margin: calc(14 * var(--mg-px)) 0 0;
    color: var(--mg-blue);
    font-size: max(18px, calc(32 * var(--mg-px)));
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

/* Tablet e móbil: as fotos da cabeceira enriba do título e os bloques un debaixo do outro */
@media (max-width: 991px) {
    .mg-cab-pax {
        display: flex;
        flex-direction: column-reverse;
        gap: 32px;
        height: auto;
        padding-top: 0;
    }

    .page-mg .mg-cab-pax h1 { margin-bottom: 16px; }
    .page-mg .mg-cab-pax p { max-width: none; margin-bottom: 0; }

    .mg-cab-pax-fotos { position: static; gap: 8px; height: 240px; }
    .mg-cab-pax-fotos .mg-foto { flex: 1; width: auto; min-width: 0; }

    .mg-destacado { grid-template-columns: 45% 1fr; width: auto; height: auto; margin: var(--mg-esp-l) 15px 0; }
    .mg-destacado-img { aspect-ratio: 653 / 417; }
    .mg-destacado-texto { padding: 24px; }

    input.mg-buscador { width: 100%; }

    .mg-filtros-categoria { gap: 10px 8px; margin-top: 20px; }
    .mg-filtros-categoria .mg-filtro { padding: 6px 16px; }
    .mg-filtros-cats .mg-filtro { padding: 6px 12px; }

    /* Tablet: filtros e pílulas co ancho do .container (720 px), coma o resto da páxina */
    .mg-filtros-lista { width: auto; max-width: 720px; }
    .mg-pilulas { gap: 48px; max-width: 750px; margin: var(--mg-esp-m) auto 0; padding: 0 15px; }

    .mg-pilula { grid-template-columns: 1fr 45%; width: auto; min-height: 0; }
    .mg-pilula-texto { padding: 8px 24px 8px 30px; }
    .mg-pilula-video { align-self: start; border-radius: 0 12px 12px 0; aspect-ratio: 765 / 538; }
    .page-mg .mg-pilula h3 { margin-bottom: 12px; }
    .mg-pilula-texto p { max-width: none; line-height: 1.6; }
    .page-mg .mg-pilula-meta { gap: 24px; margin-top: 8px; }
    .mg-pilula-meta span { gap: 8px; }

    .mg-filtros-baleiro { width: auto; padding-left: 22px; }

    .mg-itinerarios h2,
    .mg-itinerarios-intro { padding-left: 0; }
    .page-mg .mg-itinerarios-intro { margin-bottom: 32px; }
    .mg-itinerarios-lista { gap: 40px 24px; }
    .mg-itinerario { width: 100%; max-width: 460px; }
    .mg-itinerario-corpo { min-height: 0; padding: 20px 24px; border-bottom-width: 8px; }
    .mg-itinerario li + li { margin-top: 12px; }
}

/* Móbil: foto enriba e texto debaixo no destacado e nas pílulas */
@media (max-width: 767px) {
    .mg-filtros-lista { max-width: none; margin: 0 15px; }
    .mg-pilulas { max-width: none; }

    /* Filtros: "Todas…" en toda a fila e as opcións debaixo en dúas columnas */
    .mg-filtros-categoria { grid-template-columns: 1fr 1fr; }
    .mg-filtros-categoria > .mg-filtro { grid-column: 1 / -1; }
    .mg-filtros-cats > :nth-child(3n + 1) { grid-column-start: auto; }


    .mg-destacado { grid-template-columns: 1fr; }
    .mg-destacado-texto { padding: 24px 20px; }

    .mg-pilula { grid-template-columns: 1fr; }
    .mg-pilula-texto { padding: 20px 0 0 22px; }
    .mg-pilula-video { order: -1; margin-left: 22px; border-radius: 12px; }
    .mg-pilula-video img { -webkit-mask-image: none; mask-image: none; }
}

/****************************************************************************/
/* Recursos                                                                 */
/****************************************************************************/

/* Recursos usa un ancho de contido maior ca o .container (1423 px no PDF) */
.mg-ancho {
    width: calc(1423 * var(--mg-px));
    max-width: calc(100% - 30px);
    margin: 0 auto;
}


/* Convocatorias: banda azul dos Bonos e as convocatorias cunha barra azul á esquerda */
.mg-convocatorias { padding-top: var(--mg-esp-l); }

.page-mg .mg-convocatorias h2 { margin-bottom: calc(48 * var(--mg-px)); }

.mg-bonos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: calc(142 * var(--mg-px));
    padding: calc(30 * var(--mg-px)) calc(30 * var(--mg-px)) calc(30 * var(--mg-px)) calc(47 * var(--mg-px));
    border-radius: calc(10 * var(--mg-px));
    background: var(--mg-blue);
    color: #fff;
    font-size: max(15px, calc(20 * var(--mg-px)));
}

.page-mg .mg-bonos h3 {
    margin-bottom: calc(6 * var(--mg-px));
    color: #fff;
    font-size: max(18px, calc(24 * var(--mg-px)));
}

.page-mg .mg-bonos p { margin: 0; }

/* Botón branco en pílula con frecha, ex. "Ver axudas" */
.mg-btn-branco {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: calc(24 * var(--mg-px));
    min-width: calc(221 * var(--mg-px));
    min-height: max(40px, calc(48 * var(--mg-px)));
    padding: calc(2 * var(--mg-optico)) calc(30 * var(--mg-px)) 0;  /* centrado no alto mínimo: baixa a metade do recheo */
    border-radius: 999px;
    background: #fff;
    color: var(--mg-blue);
    font-size: max(14px, calc(16 * var(--mg-px)));
    transition: transform .16s var(--mg-ease-out);
}

.mg-btn-branco:hover,
.mg-btn-branco:focus { color: var(--mg-blue); text-decoration: none; }

.mg-btn-branco .mg-arrow { width: max(28px, calc(53 * var(--mg-px))); }

@media (hover: hover) and (pointer: fine) {
    .mg-btn-branco:hover .mg-arrow { transform: translateX(6px); }
}

.mg-btn-branco:active { transform: scale(.97); }

/* Ata tres por fila, como no PDF; con menos, auto-fit descarta as columnas baleiras e repártense o ancho
   (con dúas en tres columnas quedaba baleiro o terzo dereito baixo a banda dos Bonos) */
.mg-convocatorias-lista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(calc(300 * var(--mg-px)), 1fr));
    gap: calc(30 * var(--mg-px));
    margin-top: calc(36 * var(--mg-px));
}

.mg-convocatoria {
    display: flex;
    flex-direction: column;
    min-height: calc(154 * var(--mg-px));
    padding: calc(16 * var(--mg-px)) 0 calc(12 * var(--mg-px)) calc(20 * var(--mg-px));
    border-left: calc(27 * var(--mg-px)) solid var(--mg-blue);
    color: var(--mg-navy);
    font-size: max(14px, calc(16 * var(--mg-px)));
    line-height: 1.25;
}

.page-mg .mg-convocatoria h3 {
    overflow-wrap: anywhere;
    margin-bottom: calc(8 * var(--mg-px));
    color: var(--mg-navy);
    font-size: inherit;
    font-weight: 400;
    line-height: inherit;
}

.page-mg .mg-convocatoria-codigo { margin-bottom: calc(12 * var(--mg-px)); font-weight: 700; }

.mg-convocatoria a {
    display: inline-flex;
    align-items: center;
    gap: calc(14 * var(--mg-px));
    margin-top: auto;
    color: var(--mg-blue);
    font-size: max(13px, calc(14 * var(--mg-px)));
}

.mg-convocatoria a .mg-icona { font-size: max(18px, calc(26 * var(--mg-px))); }

/* Introdución: banda clara; a primeira frase en grande (lede) e o resto, en xeral */
.mg-recursos-intro { margin-top: var(--mg-esp-m); padding: var(--mg-esp-m) 0; background: var(--mg-bg-light); }
.mg-recursos-intro .mg-ancho { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: calc(80 * var(--mg-px)); align-items: start; }
.mg-recursos-lede { margin: 0; color: var(--mg-navy); font-size: max(22px, calc(36 * var(--mg-px))); line-height: 1.25; }
.mg-recursos-resto { color: var(--mg-text-suave); font-size: max(16px, calc(22 * var(--mg-px))); }
.mg-recursos-resto p { margin: 0; }
.mg-recursos-resto p + p { margin-top: max(16px, calc(20 * var(--mg-px))); }  /* 12 px parecía un só párrafo co interliñado */

/* Normativa: dous ámbitos en columnas; en cada norma, o identificador, o nome corto e o título oficial */
.mg-normativa { padding-top: var(--mg-esp-l); }
.page-mg .mg-normativa h2 { margin-bottom: calc(56 * var(--mg-px)); }
.mg-normativa-ambitos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(80 * var(--mg-px)); align-items: start; }
.mg-normativa-ambito { min-width: 0; }
.mg-normativa-ambito > summary { display: flex; align-items: center; gap: 14px; min-height: 56px; padding-bottom: 14px; border-bottom: 2px solid var(--mg-gold); color: var(--mg-navy); cursor: pointer; list-style: none; }
.mg-normativa-ambito > summary::-webkit-details-marker { display: none; }
.mg-normativa-ambito-icona { flex: none; color: var(--mg-blue); font-size: max(28px, calc(36 * var(--mg-px))); }
.mg-normativa-ambito-nome { font-size: max(20px, calc(28 * var(--mg-px))); font-weight: 700; }
.mg-normativa-chev { display: none; flex: none; margin-left: auto; color: var(--mg-navy); font-size: 14px; transition: transform 160ms var(--mg-ease-out); }
.mg-normativa-lista { margin: calc(8 * var(--mg-px)) 0 0; padding: 0; list-style: none; }
.mg-normativa-item { display: grid; grid-template-columns: max(94px, calc(160 * var(--mg-px))) minmax(0, 1fr) calc(32 * var(--mg-px)); gap: 0 calc(24 * var(--mg-px)); align-items: start; min-height: 44px; margin: 0 calc(-12 * var(--mg-px)); padding: calc(20 * var(--mg-px)) calc(12 * var(--mg-px)); border-radius: 4px; color: inherit; text-decoration: none; }
.mg-normativa-item:hover, .mg-normativa-item:focus-visible { background: var(--mg-bg-light); }
.mg-normativa-item:hover .mg-normativa-curto { text-decoration: underline; }
.mg-normativa-ref { grid-column: 1; grid-row: 1; color: #005f99; font-size: max(15px, calc(18 * var(--mg-px))); font-weight: 700; line-height: 1.3; }
.mg-normativa-corpo { grid-column: 2; grid-row: 1; min-width: 0; }
.mg-normativa-curto { display: block; color: var(--mg-navy); font-size: max(17px, calc(20 * var(--mg-px))); font-weight: 700; line-height: 1.3; }
.mg-normativa-titulo { display: block; margin-top: 4px; color: var(--mg-text-suave); font-size: max(14px, calc(16 * var(--mg-px))); line-height: 1.45; }
.mg-normativa-ext { grid-column: 3; grid-row: 1; color: var(--mg-blue); font-size: max(20px, calc(26 * var(--mg-px))); }

/* Outras páxinas web de interese: un grupo por entidade, tarxetas con icona e dominio */
.mg-interese { padding-top: var(--mg-esp-l); }
.page-mg .mg-interese h2 { margin-bottom: calc(26 * var(--mg-px)); }
.page-mg .mg-interese-intro { margin-bottom: calc(60 * var(--mg-px)); color: var(--mg-navy); font-size: max(15px, calc(20 * var(--mg-px))); }
.mg-interese-grupo + .mg-interese-grupo { margin-top: calc(64 * var(--mg-px)); }
.mg-interese-grupo-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 calc(32 * var(--mg-px)); padding-bottom: 14px; border-bottom: 2px solid var(--mg-gold); color: var(--mg-navy); font-size: max(20px, calc(28 * var(--mg-px))); font-weight: 700; }
.mg-interese-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(16 * var(--mg-px)); margin: 0; padding: 0; list-style: none; }
.mg-interese-tarxeta { display: grid; grid-template-columns: max(48px, calc(64 * var(--mg-px))) minmax(0, 1fr); gap: 4px calc(20 * var(--mg-px)); align-items: center; height: 100%; min-height: 44px; padding: calc(24 * var(--mg-px)); border-radius: 4px; background: var(--mg-bg-light); color: inherit; text-decoration: none; }
.mg-interese-tarxeta:hover, .mg-interese-tarxeta:focus-visible { background: #dce8f0; }
.mg-interese-tarxeta:hover .mg-interese-nome { text-decoration: underline; }
.mg-interese-circulo { grid-column: 1; grid-row: 1 / span 3; display: grid; place-items: center; width: max(48px, calc(64 * var(--mg-px))); height: max(48px, calc(64 * var(--mg-px))); border-radius: 50%; background: #fff; color: var(--mg-blue); }
.mg-interese-circulo .mg-icona { width: max(22px, calc(30 * var(--mg-px))); height: max(22px, calc(30 * var(--mg-px))); }
.mg-interese-ante, .mg-interese-nome, .mg-interese-dominio { grid-column: 2; }
.mg-interese-ante { color: var(--mg-text-suave); font-size: max(13px, calc(16 * var(--mg-px))); line-height: 1.3; }
.mg-interese-nome { color: var(--mg-navy); font-size: max(17px, calc(22 * var(--mg-px))); font-weight: 700; line-height: 1.25; }
.mg-interese-dominio { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: #005f99; font-size: max(14px, calc(18 * var(--mg-px))); font-weight: 700; overflow-wrap: anywhere; }
.mg-interese-ext { width: 1em; height: 1em; font-size: 14px; }

/* Tablet e móbil: grellas a unha ou dúas columnas */
@media (max-width: 991px) {
    /* Os anchos do deseño (1423 e 1516 px) escalados quedaban estreitos: o mesmo ancho ca o .container (720 px en tablet) */
    .mg-ancho { width: auto; max-width: 720px; margin: 0 auto; }

    .page-mg .mg-convocatorias h2,
    .page-mg .mg-normativa h2 { margin-bottom: 24px; }
    .mg-bonos { flex-direction: column; align-items: flex-start; padding: 24px; border-radius: 10px; }
    .mg-convocatorias-lista { grid-template-columns: 1fr; gap: 20px; margin-top: 24px; }
    .mg-convocatoria { min-height: 0; padding: 4px 0 4px 16px; border-left-width: 6px; }
    .page-mg .mg-convocatoria-codigo { margin-bottom: 8px; }

    /* Introdución e lista de ligazóns: un bloque e dúas columnas; os ámbitos de normativa, un debaixo do outro */
    .mg-recursos-intro .mg-ancho { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .mg-normativa-ambitos { grid-template-columns: minmax(0, 1fr); gap: 48px; }
    .mg-interese-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .mg-ancho { max-width: none; margin: 0 15px; }
}

/****************************************************************************/
/* Recursos en móbil: índice e convocatorias en dous botóns; barra fixa con */
/* filtros nunha folla (Formación). En escritorio e tableta non cambia nada */
/****************************************************************************/

/* Pezas só de móbil */
.mg-indice,
.mg-filtros-abrir,
.mg-filtros-estado,
.mg-filtros-fondo,
.mg-filtros-folla-cab,
.mg-filtros-folla-pe,
.mg-convocatorias-lapelas,
.mg-arriba { display: none; }

/* "Quitar os filtros" no aviso de ningún resultado (todos os tamaños) */
.mg-filtros-baleiro button { padding: 0; border: 0; background: none; color: var(--mg-blue); text-decoration: underline; }

@media (max-width: 767px) {
    /* Cabeceira: unha foto de 140 px (antes dúas de 240) e o título enseguida */
    .page-recursos .mg-cab-pax { gap: 20px; }
    .page-recursos .mg-cab-pax-fotos { height: 140px; }
    .page-recursos .mg-cab-pax-fotos .mg-foto + .mg-foto { display: none; }

    /* Índice da páxina, cunha fila que se despraza cara aos lados */
    .page-recursos .mg-indice { display: block; }
    .mg-indice ul { display: flex; gap: 8px; margin: 20px 0 0; padding: 0 15px 4px; overflow-x: auto; list-style: none; scrollbar-width: none; }
    .mg-indice ul::-webkit-scrollbar { display: none; }
    .mg-indice a { display: flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--mg-navy); border-radius: 999px; color: var(--mg-navy); font-weight: 700; white-space: nowrap; transition: transform 140ms var(--mg-ease-out); }
    .mg-indice a:hover, .mg-indice a:focus { color: var(--mg-navy); text-decoration: none; }
    .mg-indice a:active { transform: scale(.97); }

    /* Barra fixa baixo a cabeceira (--mg-cabeceira: o seu alto estreito, de menu.php) */
    .mg-filtros-barra { position: sticky; top: var(--mg-cabeceira, 0px); z-index: 20; display: flex; gap: 8px; margin-top: 6px; padding: 10px 15px; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
    .mg-filtros-barra input.mg-buscador { flex: 1; min-width: 0; width: auto; height: 48px; padding: 0 14px; text-overflow: ellipsis; }  /* a 320 px o texto de axuda remata en "…" */
    .mg-filtros-abrir { display: flex; align-items: center; gap: 8px; flex: none; height: 48px; padding: 0 16px; border: 0; border-radius: 6px; background: var(--mg-navy); color: #fff; font-weight: 700; transition: transform 140ms var(--mg-ease-out); }
    .mg-filtros-abrir:active { transform: scale(.97); }
    .mg-filtros-contador { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--mg-gold); color: var(--mg-navy); font-size: 13px; }
    .mg-filtros-contador[hidden] { display: none; }

    /* Cantos hai e os filtros postos: cada un quítase co × */
    .page-mg .mg-filtros-estado { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 15px 0; color: var(--mg-text-suave); font-size: 14px; }
    .mg-filtros-estado button { display: flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 6px 0 12px; border: 0; border-radius: 999px; background: var(--mg-bg-light); color: var(--mg-navy); font-size: 14px; font-weight: 700; }
    .mg-filtros-estado button::after { content: '×'; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; font-size: 16px; line-height: 1; }

    /* Folla inferior dos filtros, coma a do chat: fondo, × e Escape (js/index.js); dentro, os mesmos botóns de filtro ca sempre */
    .mg-filtros-fondo { display: block; position: fixed; inset: 0; z-index: 2999; background: rgba(7, 56, 86, .45); opacity: 0; visibility: hidden; transition: opacity 260ms var(--mg-ease-out), visibility 0s linear 260ms; }
    .is-folla-aberta .mg-filtros-fondo { opacity: 1; visibility: visible; transition: opacity 360ms var(--mg-ease-out), visibility 0s; }
    .mg-filtros-folla { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3000; max-height: 86vh; max-height: 86dvh; padding: 0 20px; overflow-y: auto; overscroll-behavior: contain; border-radius: 18px 18px 0 0; background: #fff; box-shadow: 0 -8px 30px rgba(7, 56, 86, .25); transform: translateY(100%); visibility: hidden; transition: transform 260ms var(--mg-ease-out), visibility 0s linear 260ms; }
    .is-folla-aberta .mg-filtros-folla { transform: none; visibility: visible; transition: transform 360ms var(--mg-ease-out), visibility 0s; }
    .mg-filtros-folla:focus { outline: none; }  /* o foco ao abrir é para o lector de pantalla, non se marca */
    .mg-filtros-folla-cab { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; }
    .page-mg .mg-filtros-folla-cab h2 { margin: 0; color: var(--mg-navy); font-size: 20px; }
    .mg-filtros-pechar { width: 44px; height: 44px; margin-right: -10px; border: 0; background: none; color: var(--mg-navy); font-size: 28px; line-height: 1; }
    .mg-filtros-folla-pe { display: flex; gap: 10px; position: sticky; bottom: 0; margin-top: 16px; padding: 14px 0 calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #e1eaf0; background: #fff; }
    .mg-filtros-folla-pe button { height: 48px; border-radius: 999px; font-weight: 700; }
    .mg-filtros-limpar { flex: none; padding: 0 20px; border: 2px solid var(--mg-navy); background: #fff; color: var(--mg-navy); }
    .mg-filtros-ver { flex: 1; border: 0; background: var(--mg-navy); color: #fff; }
    /* Resposta ao tocar, coma os botóns das categorías (.mg-filtro:active) */
    .mg-filtros-estado button, .mg-filtros-pechar, .mg-filtros-folla-pe button { transition: transform 140ms var(--mg-ease-out); }
    .mg-filtros-estado button:active, .mg-filtros-pechar:active, .mg-filtros-folla-pe button:active { transform: scale(.97); }

    /* Convocatorias: un título e dous botóns; vese o grupo escollido (o outro leva .is-oculta, js/index.js) */
    .page-recursos .mg-convocatorias-lapelas { display: block; margin: 0 15px; padding-top: var(--mg-esp-l); }
    .page-mg .mg-convocatorias-lapelas h2 { margin: 0; font-size: 22px; }
    .mg-convocatorias-lapelas div { display: flex; margin-top: 16px; padding: 4px; border-radius: 999px; background: var(--mg-bg-light); }
    .mg-convocatorias-lapelas button { flex: 1; min-height: 44px; padding: 4px 10px; border: 0; border-radius: 999px; background: none; color: var(--mg-navy); font-size: 14px; font-weight: 700; line-height: 1.2; transition: background-color 200ms ease-out, color 200ms ease-out, transform 140ms var(--mg-ease-out); }
    .mg-convocatorias-lapelas button:active { transform: scale(.97); }
    .mg-convocatorias-lapelas button[aria-pressed="true"] { background: var(--mg-navy); color: #fff; }
    .page-recursos .mg-convocatorias { padding-top: 16px; }
    .page-recursos .mg-convocatorias.is-oculta { display: none; }
    .page-recursos .mg-convocatorias h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }  /* xa o di o botón; queda para o lector */
    .page-recursos .mg-bonos { padding: 20px; border-radius: 12px; }
    .page-recursos .mg-bonos .mg-btn-branco { align-self: stretch; min-height: 48px; }
    .page-recursos .mg-convocatorias-lista { gap: 12px; margin-top: 12px; }
    .page-recursos .mg-convocatoria { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; padding: 14px 16px; border-radius: 0 12px 12px 0; background: var(--mg-bg-light); font-size: 16px; line-height: 1.35; transition: transform 140ms var(--mg-ease-out); }
    .page-recursos .mg-convocatoria:active { transform: scale(.985); }
    .page-recursos .mg-convocatoria h3 { grid-column: 1 / -1; margin-bottom: 10px; }
    .page-recursos .mg-convocatoria-codigo { margin: 0; padding: 2px 8px; border-radius: 6px; background: #fff; font-size: 13px; letter-spacing: .03em; }
    .page-recursos .mg-convocatoria a { position: static; margin: 8px 0 0; color: #005f99; font-size: 15px; font-weight: 700; }  /* o azul da marca daba 4,1:1 sobre o fondo claro */
    .page-recursos .mg-convocatoria a::before { content: none; }
    .page-recursos .mg-convocatoria a::after { content: ''; position: absolute; inset: 0; }

    /* Normativa: en móbil cada ámbito é un desplegable; a referencia arriba, o nome e o título, e a ligazón á dereita */
    .mg-normativa-ambitos { gap: 16px; margin-top: 24px; }
    .mg-normativa-ambito > summary { min-height: 56px; padding-bottom: 12px; }
    .mg-normativa-ambito-nome { font-size: 20px; }
    .mg-normativa-chev { display: inline-block; }
    .mg-normativa-ambito[open] .mg-normativa-chev { transform: rotate(180deg); }
    .mg-normativa-item { grid-template-columns: minmax(0, 1fr) 24px; gap: 4px 12px; margin: 0 -8px; padding: 16px 8px; }
    .mg-normativa-ref { grid-column: 1; grid-row: 1; }
    .mg-normativa-corpo { grid-column: 1; grid-row: 2; }
    .mg-normativa-ext { grid-column: 2; grid-row: 1 / span 2; }
    .mg-normativa-curto { font-size: 17px; }
    .mg-normativa-titulo { font-size: 14px; }
    .mg-normativa-item:active { background: var(--mg-bg-light); }

    /* Outras webs: unha tarxeta por fila, tocable enteira */
    .mg-interese-lista { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .mg-interese-tarxeta { min-height: 88px; }
    .mg-interese-tarxeta:active { background: #dce8f0; }

    /* Volver arriba: tras dúas pantallas, á esquerda (á dereita vai o robot do chat) e á mesma altura ca el */
    .mg-arriba { display: grid; place-items: center; position: fixed; left: calc(16px + env(safe-area-inset-left, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 1000; width: 48px; height: 48px; border: 0; border-radius: 50%; background: #fff; color: var(--mg-navy); font-size: 20px; box-shadow: 0 6px 18px -6px rgba(7, 56, 86, .5); opacity: 0; visibility: hidden; transform: translateY(12px) scale(.9); transition: opacity 200ms ease-out, transform 260ms var(--mg-ease-out), visibility 0s linear 260ms; }
    .mg-arriba.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity 200ms ease-out, transform 260ms var(--mg-ease-out), visibility 0s; }
}

/****************************************************************************/
/* Formación en móbil: barra fixa con filtros nunha folla (a de Recursos),  */
/* destacado e pílulas compactos, itinerarios en carrusel e volver arriba.  */
/* En escritorio e tableta non cambia nada (manda o PDF)                    */
/****************************************************************************/

/* Pezas só de móbil */
.mg-pilula-meta .mg-pilula-cat,
.mg-pilula-mais { display: none; }

.mg-itinerario li a { color: inherit; }  /* os pasos que levan a unha pílula: o mesmo texto ca os outros */

@media (max-width: 767px) {
    /* Cabeceira: as dúas fotos a 180 px (antes 240), encadradas na cara e na man; o campus, un botón de 48 px */
    .page-formacion .mg-cab-pax { gap: 20px; }
    .page-formacion .mg-cab-pax-fotos { height: 180px; }
    .page-formacion .mg-cab-pax-fotos img { object-position: center 15%; }
    .page-formacion .mg-cab-pax-fotos .mg-foto + .mg-foto img { object-position: center 38%; }
    .page-formacion .mg-cab-pax .mg-link-arrow { display: flex; justify-content: center; min-height: 48px; margin-top: 18px; border-radius: 999px; background: var(--mg-blue); color: #fff; }
    .page-formacion .mg-cab-pax .mg-arrow { display: none; }
    .page-formacion .mg-cab-pax .mg-link-arrow { transition: transform 140ms var(--mg-ease-out); }
    .page-formacion .mg-cab-pax .mg-link-arrow:active { transform: scale(.97); }

    /* Destacado en horizontal: foto co play á esquerda e texto á dereita; toda a tarxeta é o enlace (o "Ver agora" estírase sobre ela) */
    .page-formacion .mg-destacado { position: relative; grid-template-columns: 42% 1fr; border-radius: 12px; overflow: hidden; transition: transform 140ms var(--mg-ease-out); }
    .page-formacion .mg-destacado:active { transform: scale(.985); }
    .page-formacion .mg-destacado::before { content: ''; position: absolute; left: 21%; top: 50%; width: 40px; height: 46px; background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%); transform: translate(-40%, -50%); pointer-events: none; }
    .page-formacion .mg-destacado-img { height: 100%; min-height: 150px; aspect-ratio: auto; }
    .page-formacion .mg-destacado-texto { display: flex; flex-direction: column; gap: 6px; align-self: stretch; padding: 14px 14px 14px 16px; font-size: 14px; }
    .page-formacion .mg-destacado h2 { margin: 0; font-size: 18px; line-height: 1.25; }
    .page-formacion .mg-destacado-meta { margin: 0; color: var(--mg-text-suave); }
    .page-formacion .mg-destacado .mg-btn-azul { position: static; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 44px; margin-top: auto; padding: 0 12px; }
    .page-formacion .mg-destacado .mg-btn-azul:active { transform: none; }  /* xa encolle a tarxeta: os dous a un tempo era unha escala dobre */
    .page-formacion .mg-destacado .mg-btn-azul::before { content: none; }  /* a zona de toque maior (pointer: coarse) xa é a tarxeta */
    .page-formacion .mg-destacado .mg-btn-azul::after { content: ''; position: absolute; inset: 0; }

    /* Buscador e filtros: o bloque pasa a "contents" para que a barra fixa dure toda a lista, coma en Recursos.
       Sen o transform do .mg-reveal: faría da sección o bloque contedor da folla (position: fixed) */
    .page-formacion .mg-formacion { padding-top: var(--mg-esp-m); transform: none !important; }
    .page-formacion .mg-formacion > [data-filtros] { display: contents; }
    .page-formacion #pilulas { scroll-margin-top: 80px; }
    #pilulas :is(a, button) { scroll-margin-top: 80px; }  /* co tabulador, o control enfocado tampouco queda baixo a barra */  /* "Ver N formacións" baixa á lista: a primeira, xusto baixo a barra */

    /* Pílulas compactas: foto pequena co play, título, categoría e data; o texto en tres liñas con "Ler máis" */
    .page-formacion .mg-pilulas { gap: 12px; margin-top: 12px; }
    .page-formacion .mg-pilula { grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto auto 1fr; grid-template-areas: "video titulo" "video meta" "video ." "texto texto" "mais mais"; column-gap: 14px; padding: 14px 14px 6px 20px; border-radius: 12px; box-shadow: 0 0 0 1px #e1eaf0; scroll-margin-top: 80px; }  /* ao saltar a #pilula-N non queda baixo a barra */
    .page-formacion .mg-pilula::before { border-radius: 12px 0 0 12px; }
    /* Ao chegar por ancla (itinerarios, "Ver agora", buscador da cabeceira) a pílula márcase e apágase: dise cal é.
       Empeza tras o scroll suave (300 ms); só cambia a opacidade, así que vale igual con movemento reducido */
    .page-formacion .mg-pilula:target::after { content: ''; position: absolute; inset: 0; border-radius: 12px; background: rgba(0, 123, 196, .08); box-shadow: 0 0 0 2px var(--mg-blue); pointer-events: none; animation: mg-destaque 1600ms ease 300ms both; }
    @keyframes mg-destaque { 0%, 50% { opacity: 1; } to { opacity: 0; } }  /* quieta media animación e logo apágase: cun ease-out caía antes de rematar o scroll e case non se vía */
    .page-formacion .mg-pilula-texto { display: contents; }
    .page-formacion .mg-pilula h3 { grid-area: titulo; margin: 0; font-size: 17px; line-height: 1.25; text-transform: none; }
    .page-formacion .mg-pilula-meta { grid-area: meta; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0 0; color: #005f99; font-size: 14px; }  /* o azul da marca daba 4,4:1 */
    .page-formacion .mg-pilula-meta .mg-icona { display: none; }
    .page-formacion .mg-pilula-meta .mg-pilula-cat { display: inline-flex; gap: 6px; color: var(--mg-text-suave); font-weight: 700; }
    .page-formacion .mg-pilula-cat::before { content: ''; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--mg-cat); }
    .page-formacion .mg-pilula-texto p:not([class]) { grid-area: texto; display: -webkit-box; margin: 10px 0 0; overflow: hidden; font-size: 15px; line-height: 1.55; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
    .page-formacion .mg-pilula.is-aberta .mg-pilula-texto p:not([class]) { display: block; }
    .page-formacion .mg-pilula-mais { grid-area: mais; display: flex; align-items: center; justify-self: start; min-height: 44px; padding: 0; border: 0; background: none; color: var(--mg-navy); font-weight: 700; }
    .page-formacion .mg-pilula-mais:active { opacity: .6; }
    .mg-pilula-mais::after { content: '+'; margin-left: 6px; font-size: 20px; line-height: 1; }
    .mg-pilula-mais[aria-expanded="true"]::after { content: '\2212'; }
    .mg-pilula-menos,
    .mg-pilula-mais[aria-expanded="true"] span:first-child { display: none; }
    .mg-pilula-mais[aria-expanded="true"] .mg-pilula-menos { display: inline; }
    .page-formacion .mg-pilula-video { grid-area: video; align-self: start; height: 84px; margin: 0; border-radius: 8px; aspect-ratio: auto; }
    .page-formacion .mg-pilula-play { left: 0; top: 0; width: 100%; height: 100%; background: rgba(7, 56, 86, .18); clip-path: none; transform: none; }  /* toda a foto é a zona de toque */
    .page-formacion .mg-pilula-play::before { content: ''; position: absolute; left: 50%; top: 50%; width: 22px; height: 26px; background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%); transform: translate(-40%, -50%); }
    .page-formacion .mg-pilula-play:active { background: rgba(7, 56, 86, .4); }
    .page-formacion .mg-pilula-play[aria-disabled="true"] { display: none; }  /* sen vídeo non hai nada que premer */
    /* Co vídeo en marcha, vai enriba a todo o ancho (na foto pequena non se vería) */
    .page-formacion .mg-pilula:has(iframe, video) { grid-template-areas: "video video" "titulo titulo" "meta meta" ". ." "texto texto" "mais mais"; }
    .page-formacion .mg-pilula:has(iframe, video) .mg-pilula-video { height: auto; margin-bottom: 12px; aspect-ratio: 16 / 9; }

    /* Itinerarios: carrusel co seguinte asomando (coma os máis descargados de Recursos); a etiqueta enriba do título */
    .page-formacion .mg-itinerarios-intro { margin-bottom: 16px; }
    .page-formacion .mg-itinerarios-lista { flex-wrap: nowrap; justify-content: flex-start; gap: 12px; margin: 0 -15px; padding: 0 15px 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 15px; overscroll-behavior-x: contain; scrollbar-width: none; }
    .page-formacion .mg-itinerarios-lista::-webkit-scrollbar { display: none; }
    .page-formacion .mg-itinerario { display: flex; flex-direction: column; flex: 0 0 80%; max-width: none; border-top: 6px solid var(--mg-blue); border-radius: 0 0 12px 12px; overflow: hidden; background: var(--mg-bg-light); scroll-snap-align: start; }
    .page-formacion .mg-itinerario img { height: 110px; object-fit: cover; }
    .page-formacion .mg-itinerario-etiqueta { order: 0; margin: 0; padding: 12px 16px 0; color: #005f99; font-size: 13px; letter-spacing: .04em; text-align: left; }
    .page-formacion .mg-itinerario-corpo { flex: 1; padding: 4px 16px 6px; border-bottom: 0; }
    .page-formacion .mg-itinerario h3 { margin: 0 0 4px; font-size: 18px; line-height: 1.25; }
    .page-formacion .mg-itinerario li { min-height: 44px; font-size: 15px; }
    .page-formacion .mg-itinerario li + li { margin-top: 0; }
    .page-formacion .mg-itinerario li a { display: flex; align-items: center; align-self: stretch; flex: 1; text-decoration: underline; text-decoration-color: #c8dae5; text-underline-offset: 3px; }
    .page-formacion .mg-itinerario li a:active { color: var(--mg-blue); }
}

/* Con movemento reducido: a folla só funde, e sen escalas ao tocar */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .mg-filtros-folla { transform: none; opacity: 0; transition: opacity 200ms ease-out, visibility 0s linear 200ms; }
    .is-folla-aberta .mg-filtros-folla { opacity: 1; transition: opacity 200ms ease-out, visibility 0s; }
    .mg-arriba, .mg-arriba.is-visible { transform: none; }
    .page-formacion .mg-destacado:active,
    .page-formacion .mg-cab-pax .mg-link-arrow:active,
    .page-recursos .mg-convocatoria:active,
    .mg-indice a:active,
    .mg-filtros-abrir:active,
    .mg-filtros-estado button:active,
    .mg-filtros-pechar:active,
    .mg-filtros-folla-pe button:active,
    .mg-convocatorias-lapelas button:active,
    .mg-ficha-pechar:active { transform: none; }
}

/****************************************************************************/
/* Administración en móbil: */
/* índice fixo, oportunidades en carrusel, valores en filas, liña do tempo,  */
/* "Dende…" en dous botóns e "Ler máis". En escritorio e tableta non cambia  */
/****************************************************************************/

@media (max-width: 767px) {
    /* Índice fixo baixo a cabeceira (--mg-cabeceira: o seu alto estreito, de menu.php); o apartado que se le, enchido */
    .page-admin .mg-indice { display: block; position: sticky; top: var(--mg-cabeceira, 0px); z-index: 20; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1px 0 #e1eaf0; }
    .page-admin .mg-indice ul { margin: 0; padding: 10px 15px; }
    .page-admin .mg-indice a { min-height: 44px; padding: 0 14px; border: 0; background: var(--mg-bg-light); font-size: 14px; transition: background-color 160ms ease-out, color 160ms ease-out, transform 140ms var(--mg-ease-out); }  /* 44 px: alvo táctil mínimo; a barra fixa queda en 60 px */
    .page-admin .mg-indice a.is-activo { background: var(--mg-navy); color: #fff; }
    .page-admin section[id] { scroll-margin-top: 60px; }  /* o salto do índice non deixa o título baixo el (a cabeceira xa a conta o scroll-padding de menu.php) */

    /* Historia: título, foto de 180 px e texto; as catro oportunidades en carrusel co seguinte asomando */
    .page-admin .mg-admin-historia-intro { display: flex; flex-direction: column; gap: 16px; }
    .page-admin .mg-admin-historia-intro > div { display: contents; }
    .page-admin .mg-admin-historia-intro h2 { order: -1; margin: 0; }
    .page-admin .mg-admin-historia-intro img { height: 180px; border-radius: 12px; }
    /* Formación: a foto de "Recursos formativos" ao ancho do texto e enteira (3:2), sen recortar */
    .page-formacion .mg-admin-historia-intro > .mg-foto { align-self: stretch; }
    .page-formacion .mg-admin-historia-intro img { height: auto; }
    .page-admin .mg-admin-oportunidades { display: flex; gap: 12px; margin: 20px -15px 0; padding: 0 15px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 15px; overscroll-behavior-x: contain; scrollbar-width: none; }
    .page-admin .mg-admin-oportunidades::-webkit-scrollbar { display: none; }
    .page-admin .mg-admin-oportunidades li { flex: 0 0 72%; border-radius: 12px; overflow: hidden; scroll-snap-align: start; }
    .page-admin .mg-admin-oportunidades li.mg-reveal { opacity: 1; transform: none; }  /* no carrusel entran coa sección: as de fóra da pantalla saían en branco ao deslizar */
    .page-admin .mg-admin-oportunidades img { height: 130px; }
    .page-admin .mg-admin-oportunidades div { padding: 14px 16px 18px; }
    .page-admin .mg-admin-oportunidades h3 { margin-bottom: 4px; font-size: 17px; }
    .page-admin .mg-admin-oportunidades p { font-size: 15px; line-height: 1.4; }

    /* Valores: filas coa icona á esquerda (eran bloques de ~160 px coa icona enriba) */
    .page-admin .mg-admin-iconas { gap: 0; margin-top: 20px; }
    .page-admin .mg-admin-iconas li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 14px; padding: 14px 0; }
    .page-admin .mg-admin-iconas li + li { border-top: 1px solid #e1eaf0; }
    .page-admin .mg-admin-iconas .mg-admin-icona { grid-row: span 2; width: 44px; height: 44px; margin: 0; font-size: 22px; }
    .page-admin .mg-admin-iconas h3 { margin-bottom: 2px; font-size: 17px; }
    .page-admin .mg-admin-iconas p { font-size: 15px; line-height: 1.45; }

    /* Frase: cita cunha raia dourada */
    .page-admin .mg-admin-frase { padding: 32px 15px; }
    .page-admin .mg-admin-frase p { padding-left: 16px; border-left: 4px solid var(--mg-gold); font-size: 20px; line-height: 1.3; }

    /* Antes, Os cambios, Hoxe: liña do tempo vertical, coma os pasos de Emprender; "Hoxe", enchido */
    .page-admin .mg-admin-etapas { gap: 0; margin-top: 24px; }
    .page-admin .mg-admin-etapas li { position: relative; padding: 0 0 24px 60px; }
    .page-admin .mg-admin-etapas li:not(:last-child)::after { content: ''; position: absolute; top: 44px; bottom: 0; left: 21px; border-left: 2px solid var(--mg-bg-light); }
    .page-admin .mg-admin-etapa-circulo { position: absolute; top: 0; left: 0; width: 44px; height: 44px; margin: 0; background: var(--mg-bg-light); color: var(--mg-blue); font-size: 22px; }
    .page-admin .mg-admin-etapas li:last-child .mg-admin-etapa-circulo { background: var(--mg-blue); color: #fff; }
    .page-admin .mg-admin-etapas h3 { display: flex; align-items: center; min-height: 44px; margin: 0; font-size: 18px; }
    .page-admin .mg-admin-etapas p { font-size: 15px; line-height: 1.45; }

    /* Planificar: foto a todo o ancho co lema abaixo; pasos coa raia azul, máis xuntos, e as actuacións en etiquetas */
    .page-admin .mg-admin-banda { height: 170px; margin-top: 20px; border-radius: 12px; }
    .page-admin .mg-admin-banda::before { background: linear-gradient(rgba(7, 56, 86, 0) 30%, rgba(7, 56, 86, .92) 80%); }
    .page-admin .mg-admin-banda p { top: auto; right: 16px; bottom: 14px; left: 16px; max-width: none; transform: none; }
    .page-admin .mg-admin-pasos { gap: 28px; margin-top: 24px; }
    .page-admin .mg-admin-paso-num { margin: 14px 0 6px; }
    .page-admin .mg-admin-pasos h3 { margin-bottom: 6px; }
    .page-admin .mg-admin-pasos p { font-size: 15px; line-height: 1.45; }
    .page-admin .mg-admin-pasos ul { margin-top: 10px; padding-left: 1.4em; }
    .page-admin .mg-admin-pasos ul li { margin-top: 4px; font-size: 15px; }

    /* Dende o Concello / Dende os postos: dous botóns (os de Recursos) e unha caixa; o título xa vai no botón */
    .page-admin .mg-convocatorias-lapelas { display: block; margin-top: 20px; }
    .page-admin .mg-admin-dende { margin-top: 12px; }
    .page-admin .mg-admin-dende > .is-oculta { display: none; }
    .page-admin .mg-admin-dende h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .page-admin .mg-admin-dende-caixa { border-radius: 12px; overflow: hidden; }
    .page-admin .mg-admin-dende-caixa img { height: 150px; }
    .page-admin .mg-admin-dende-caixa ul { padding: 8px 16px 16px; list-style: none; }
    .page-admin .mg-admin-dende-caixa li { position: relative; margin: 0; padding: 10px 0 10px 30px; line-height: 1.4; }
    .page-admin .mg-admin-dende-caixa li + li { border-top: 1px solid #dbe5ec; }
    .page-admin .mg-admin-dende-caixa li::before { content: ''; position: absolute; top: 18px; left: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--mg-blue); }
    .page-admin .mg-admin-dende-caixa li.is-aviso { margin: 8px -6px 0; padding: 12px 12px 12px 36px; border: 0; border-radius: 8px; background: #fff; }
    .page-admin .mg-admin-dende-caixa li.is-aviso::before { top: 19px; left: 14px; width: 10px; height: 10px; background: var(--mg-gold); }

    /* Mercados Excelentes: o texto longo, cortado en catro liñas con "Ler máis" (js/index.js) */
    .page-admin .mg-admin-bloque:has(.mg-pilula-mais):not(.is-aberta) p:first-of-type { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
    .page-admin .mg-admin-bloque:has(.mg-pilula-mais):not(.is-aberta) p + p { display: none; }
    .page-admin .mg-pilula-mais { display: flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--mg-navy); font-weight: 700; }
    .page-admin .mg-pilula-mais:active { opacity: .6; }
}

/****************************************************************************/
/* Erro 404                                                                 */
/****************************************************************************/

/* A páxina enche a xanela e o texto vai ao medio: nunha pantalla alta quedaba unha franxa branca baixo o pé */
.page-error {
    display: flex;
    flex-direction: column;
    min-height: 100svh;  /* 100vh en móbil inclúe a barra de enderezos e sobresaía */
}

.page-error main { flex: 1; display: flex; flex-direction: column; }

.mg-error {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 120px 0;
}

/****************************************************************************/
/* Animacións de entrada (js/index.js)                                      */
/****************************************************************************/

.mg-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .3s var(--mg-ease-out), transform .4s var(--mg-ease-out);
}

/* Seccións moi altas: unha subida de 28 px de todo o bloque lese como un salto */
.mg-admin-excelentes.mg-reveal:not(.is-visible),
.mg-faq.mg-reveal:not(.is-visible) { transform: translateY(12px); }

.mg-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .mg-reveal {
        transition: none;
        opacity: 1;
        transform: none;
    }
}

/****************************************************************************/
/* Resposta ao tocar e sen seleccionar texto nos controis                   */
/****************************************************************************/

.mg-idioma summary:active { opacity: .7; }

.mg-chip,
.mg-filtro,
.mg-beneficio-head,
.mg-video-dots button { -webkit-user-select: none; user-select: none; }

/****************************************************************************/
/* Pantallas táctiles: zona de toque maior sen cambiar o debuxo (::before)  */
/****************************************************************************/

@media (pointer: coarse) {
    .mg-video-dots { gap: 12px; }

    .mg-video-dots button,
    .mg-nav-links a,
    .mg-chip,
    .mg-btn-gold,
    .mg-btn-azul,
    .mg-convocatoria a,
    .mg-link-arrow,
    .mg-beneficio-head { position: relative; }

    .mg-video-dots button::before,
    .mg-nav-links a::before,
    .mg-chip::before,
    .mg-btn-gold::before,
    .mg-btn-azul::before,
    .mg-convocatoria a::before,
    .mg-link-arrow::before,
    .mg-beneficio-head::before {
        content: '';
        position: absolute;
    }

    .mg-video-dots button::before { inset: -16px -6px; }   /* 24 x 44 */
    .mg-nav-links a::before,
    .mg-chip::before,
    .mg-btn-gold::before { inset: -7px 0; }                 /* en tablet medían 29-37 px de alto */
    .mg-link-arrow::before { inset: -9px 0; }               /* 26 -> 44 */
    .mg-btn-azul::before { inset: -8px 0; }                 /* 28 -> 44 */
    .mg-convocatoria a::before { inset: -13px 0; }          /* 18 -> 44 */
    .mg-beneficio-head::before { inset: -5px 0; }           /* 34 -> 44; entre filas hai 12 px, non se pisan */

    /* Zoom do mapa: 44 x 44 (34 co rato); agora o mapa úsase máis co dedo */
    .mg-mapa .leaflet-control-zoom a { width: 44px; height: 44px; line-height: 46px; font-size: 22px; }
}

/****************************************************************************/
/* Móbil: escala e contraste unificados (o PDF non ten deseño de móbil)     */
/* H1 28 px, H2 22 px, corpo 16 px, secundario 14 px; gris sobre fondo claro a 4,5:1 */
/****************************************************************************/

@media (max-width: 767px) {
    .mg-hero h1 { font-size: 28px; }

    .page-mg .mg-admin-excelentes h2 { font-size: 22px; }

    .page-mg .mg-itinerarios-intro { font-size: 16px; }
    .mg-destacado-meta { font-size: 14px; }
    .mg-perfil-label small { font-size: 14px; }

    .mg-beneficio-chevron { color: var(--mg-navy); }  /* o dourado sobre branco daba 1,9:1 e indica o estado aberto */
    .mg-autoav-progreso { padding: 6px 0; }

    :root { --mg-esp-l: 56px; --mg-esp-m: 40px; }  /* eran 80 e 56 px: ~100 px de baleiro entre seccións */

    .mg-bot-fixed.is-baixando { opacity: 0; visibility: hidden; pointer-events: none; }  /* escóndese ao baixar (js/index.js) */

    /* Portada: seccións máis baixas sen perder contido (a foto de beneficios é decorativa; o selo usa o mesmo espazo ca o resto) */
    .mg-beneficios-photo { height: 140px; }
    .mg-selo { padding-top: var(--mg-esp-l); }
    .mg-selo-map { width: 56%; max-width: 220px; }
    .mg-frase { min-height: 220px; }
    .mg-frase::before { background: rgba(0, 0, 0, .5); }  /* o texto ocupa todo o ancho e a foto ten zonas moi claras */

    /* Perfís: a foto de beneficios (140 px) é máis baixa ca as tarxetas, a grande (profesional) e as dúas pequenas pesan parecido (~170-190 px de foto), co título sobre a foto */
    .mg-perfis { padding-top: var(--mg-esp-m); }
    .mg-perfis-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .mg-perfil {
        position: relative;
        display: grid;
        overflow: hidden;
        border-radius: 12px;  /* o mesmo ca as píldoras de vídeo (os radios da web son 6/10/12/16) */
        background: var(--mg-navy);
        /* sen o escalonado da entrada (inline en js/index.js): o feedback do toque ten que ser inmediato */
        transition: opacity .3s var(--mg-ease-out), transform .4s var(--mg-ease-out), scale .14s var(--mg-ease-out) !important;
        transition-delay: 0s !important;
    }
    .mg-perfil:first-child { grid-column: 1 / -1; }
    .mg-perfil:active { scale: .98; }
    .mg-perfil:focus-visible { outline: 3px solid var(--mg-gold); outline-offset: -3px; }
    .mg-perfil::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 6px; background: var(--mg-blue); }  /* guiño á banda azul das tarxetas */

    .mg-perfil > .mg-foto { grid-area: 1 / 1; }
    .mg-perfil-img { grid-area: 1 / 1; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border: 0; border-radius: 0; }
    .mg-perfil:first-child .mg-perfil-img { aspect-ratio: 16 / 9; object-position: 50% 18%; }
    .mg-perfil:nth-child(2) .mg-perfil-img { object-position: 50% 42%; }  /* a cara da clienta no centro */

    .mg-perfil-label {
        position: relative;  /* .mg-foto ten position: relative e, sen isto, a foto queda enriba do texto */
        grid-area: 1 / 1;
        align-self: end;
        align-items: flex-end;
        padding: 20px 14px 16px;
        color: #fff;
        /* só o preciso para o contraste (>= 6,4:1): sen codo e tapando ~35-55 % da foto, antes ~55-80 % */
        background: linear-gradient(to top, rgba(7, 56, 86, .92) 0%, rgba(7, 56, 86, .86) 50%, rgba(7, 56, 86, .8) 70%, rgba(7, 56, 86, .74) 80%, rgba(7, 56, 86, .5) 88%, rgba(7, 56, 86, .22) 94%, rgba(7, 56, 86, 0) 100%);
    }
    .mg-perfil-label > span:first-child { min-width: 0; }
    .mg-perfil-label strong { font-size: clamp(15px, 4.2vw + 1px, 20px); line-height: 1.15; color: #fff; text-wrap: balance; overflow-wrap: break-word; text-shadow: 0 1px 2px rgba(7, 56, 86, .35); }
    .mg-perfil-label small { max-width: none; margin-top: 4px; font-size: clamp(14px, 3.8vw, 15px); font-weight: 400; line-height: 1.3; color: #fff; text-shadow: 0 1px 2px rgba(7, 56, 86, .35); }

    .mg-perfil .mg-arrow { position: absolute; top: 10px; right: 10px; z-index: 2; width: 30px; height: 30px; margin: 0; border-radius: 50%; background: #fff; color: var(--mg-navy); box-shadow: 0 1px 4px rgba(7, 56, 86, .3); transition: none; }
    .mg-perfil .mg-arrow::after { top: 50%; left: 50%; right: auto; width: 8px; height: 8px; transform: translate(-60%, -50%) rotate(45deg); }
    .mg-perfil:hover > *, .mg-perfil:hover .mg-arrow { transform: none; }  /* con overflow: hidden o hover de escritorio deixaba un oco de 6 px */
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .mg-perfil { transition: none !important; }
    .mg-perfil:active { scale: none; }
}

/****************************************************************************/
/* Chat en móbil (portada): píldora na páxina e chat nunha folla inferior   */
/* Só transform e opacity; a folla péchase co ×, o fondo, Escape ou arrastrando a asa (js/index.js) */
/****************************************************************************/

/* En escritorio e tableta o chat vai na páxina, coma sempre */
.mg-axuda-fondo, .mg-axuda-asa { display: none; }

@media (max-width: 767px) {
    html.mg-axuda-bloqueo { overflow: hidden; overscroll-behavior: none; }  /* a páxina de detrás non se move coa folla aberta */

    #axuda.mg-axuda-folla { padding: 24px 16px; }

    /* A píldora: o único que se ve do chat na páxina */

    /* Fondo oscurecido: fundido, sen bloquear o clic cando está pechado */
    .mg-axuda-fondo { display: block; position: fixed; inset: 0; z-index: 2999; background: rgba(7, 56, 86, .45); opacity: 0; visibility: hidden; transition: opacity 260ms var(--mg-ease-out), visibility 0s linear 260ms; }
    #axuda.is-open .mg-axuda-fondo { opacity: 1; visibility: visible; transition: opacity 360ms var(--mg-ease-out), visibility 0s; }

    /* A folla: pechada queda fóra da pantalla e sen foco */
    #axuda.mg-axuda-folla .mg-axuda-box {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 3000;
        height: 94vh;
        height: 94dvh;
        max-width: none;
        margin: 0;
        padding: 0 14px calc(14px + env(safe-area-inset-bottom, 0px));
        display: flex;
        flex-direction: column;
        border: 0;
        border-radius: 18px 18px 0 0;
        background: #fff;
        box-shadow: 0 -8px 30px rgba(7, 56, 86, .25);
        overscroll-behavior: contain;
        transform: translateY(100%);
        visibility: hidden;
        transition: transform 260ms var(--mg-ease-out), visibility 0s linear 260ms;
    }
    #axuda.mg-axuda-folla .mg-axuda-box:focus { outline: none; }  /* o foco ao abrir é para o lector de pantalla, non se marca */
    #axuda.is-open .mg-axuda-box { transform: none; visibility: visible; transition: transform 360ms var(--mg-ease-out), visibility 0s; }

    /* O contido entra escalonado (45 ms entre elementos); cada fillo non se encolle: só o rexistro se estira */
    #axuda.mg-axuda-folla .mg-axuda-box > * { flex-shrink: 0; opacity: 0; transform: translateY(10px); transition: opacity 140ms ease-out, transform 140ms ease-out; }
    #axuda.is-open .mg-axuda-box > * { opacity: 1; transform: none; transition: opacity 280ms ease-out, transform 360ms var(--mg-ease-out); transition-delay: calc(var(--i, 0) * 45ms + 60ms); }
    #axuda.mg-axuda-folla .mg-axuda-box > :nth-child(2) { --i: 1; }
    #axuda.mg-axuda-folla .mg-axuda-box > :nth-child(3) { --i: 2; }
    #axuda.mg-axuda-folla .mg-axuda-box > :nth-child(4) { --i: 3; }
    #axuda.mg-axuda-folla .mg-axuda-box > :nth-child(5) { --i: 4; }
    #axuda.mg-axuda-folla .mg-axuda-box > :nth-child(6) { --i: 5; }

    /* A asa e a cabeceira: alí se arrastra (touch-action: none só aquí; o rexistro segue co seu scroll) */
    .mg-axuda-asa { display: block; position: relative; flex: 0 0 auto; height: 52px; touch-action: none; }
    .mg-axuda-agarre { position: absolute; left: 50%; top: 7px; width: 44px; height: 5px; margin: 0 0 0 -22px; border-radius: 3px; background: rgba(7, 56, 86, .22); }
    .mg-axuda-pechar { position: absolute; right: -6px; top: 8px; width: 44px; height: 44px; border: 0; background: none; color: var(--mg-navy); font-size: 28px; line-height: 1; }

    #axuda.mg-axuda-folla .mg-axuda-bubble { position: absolute; top: 19px; left: 14px; right: 52px; margin: 0; padding: 0; border: 0; }
    #axuda.mg-axuda-folla .mg-axuda-bubble h2 { color: var(--mg-blue); font-size: 20px; line-height: 1.3; }
    #axuda.mg-axuda-folla .mg-axuda-bubble::after { display: none; }
    #axuda.mg-axuda-folla .mg-axuda-chips { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; /* con overflow-x, o y pasa a auto e o redondeo do alto dos chips (1 px) deixaba mover a fila en vertical */ margin: 0 -14px; padding: 0 14px 4px; gap: 8px; scrollbar-width: none; }
    #axuda.mg-axuda-folla .mg-axuda-chips::-webkit-scrollbar { display: none; }
    #axuda.mg-axuda-folla .mg-axuda-chips .mg-chip { flex: 0 0 auto; }
    #axuda.mg-axuda-folla .mg-axuda-log { flex: 1 1 auto; min-height: 0; max-height: none; padding: 20px 0 0; margin: 0 0 12px; overscroll-behavior: contain; }  /* 20 px: o que esvaece a máscara de .mg-axuda-log */
    #axuda.mg-axuda-folla .mg-axuda-form { display: flex; flex: none; gap: 8px; }
    #axuda.mg-axuda-folla .mg-axuda-log > :first-child { margin-top: 0; }  /* a conversa empeza arriba, non centrada no oco */
    #axuda.mg-axuda-folla .mg-axuda-input { flex: 1; width: auto; min-width: 0; height: 48px; }
    #axuda.mg-axuda-folla .mg-axuda-enviar { display: grid; flex: none; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--mg-navy); color: #fff; }
    #axuda.mg-axuda-folla .mg-axuda-enviar:active { transform: scale(.95); }
    #axuda.mg-axuda-folla .mg-axuda-enviar:focus-visible { outline: 3px solid var(--mg-gold); outline-offset: 2px; }
    #axuda.mg-axuda-folla .mg-msg { max-width: 88%; padding: 10px 14px; }
    #axuda.mg-axuda-folla .mg-axuda-nota { margin: 14px 0 0; padding: 0 4px; font-size: 12px; }  /* con menos, o anel de foco do campo pisa a primeira liña */
    /* Co teclado aberto (js/index.js) ou xa en conversa, sen preguntas fixas nin a segunda parte do aviso: xa se viron ao abrir a folla e así a conversa ten máis sitio */
    #axuda.is-teclado .mg-axuda-chips,
    #axuda.is-teclado .mg-axuda-nota-resto,
    #axuda.is-conversa .mg-axuda-chips,
    #axuda.is-conversa .mg-axuda-nota-resto { display: none; }
}

/* Panel do chat fóra da portada e Contacto (axuda-chat.php con $axuda_flotante): desde tableta, abaixo á dereita e sobre a páxina; no móbil é a folla de arriba */
#axuda.mg-axuda-flotante { padding: 0; }
.mg-axuda-enviar { display: none; }
@media (min-width: 768px) {
    #axuda.mg-axuda-flotante .mg-axuda-box {
        position: fixed;
        right: 24px;
        bottom: 24px;
        z-index: 3000;
        display: flex;
        flex-direction: column;
        width: 400px;
        max-width: calc(100vw - 48px);
        height: min(680px, calc(100vh - 48px));
        height: min(680px, calc(100dvh - 48px));
        margin: 0;
        padding: 0 16px 14px;
        border: 0;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 12px 40px rgba(7, 56, 86, .3);
        transform-origin: bottom right;
        transform: translateY(12px) scale(.97);
        opacity: 0;
        visibility: hidden;
        transition: transform 200ms var(--mg-ease-out), opacity 160ms ease-out, visibility 0s linear 200ms;
    }
    #axuda.mg-axuda-flotante.is-open .mg-axuda-box { transform: none; opacity: 1; visibility: visible; transition: transform 260ms var(--mg-ease-out), opacity 200ms ease-out, visibility 0s; }
    #axuda.mg-axuda-flotante .mg-axuda-box:focus { outline: none; }
    #axuda.mg-axuda-flotante .mg-axuda-asa { display: block; flex: 0 0 auto; height: 56px; }
    #axuda.mg-axuda-flotante .mg-axuda-agarre { display: none; }
    #axuda.mg-axuda-flotante .mg-axuda-pechar { position: absolute; right: 6px; top: 6px; width: 44px; height: 44px; border: 0; background: none; color: var(--mg-navy); font-size: 28px; line-height: 1; }
    #axuda.mg-axuda-flotante .mg-axuda-bubble { position: absolute; top: 15px; left: 16px; right: 56px; margin: 0; padding: 0; border: 0; }
    #axuda.mg-axuda-flotante .mg-axuda-bubble::after { display: none; }
    #axuda.mg-axuda-flotante .mg-axuda-bubble h2 { color: var(--mg-blue); font-size: 20px; line-height: 1.3; }
    #axuda.mg-axuda-flotante .mg-axuda-chips { flex: none; gap: 8px; margin: 0 0 10px; }
    #axuda.mg-axuda-flotante .mg-chip { min-height: 44px; padding: 6px 14px; font-size: 14px; }
    #axuda.mg-axuda-flotante .mg-axuda-log { flex: 1 1 auto; min-height: 0; max-width: none; max-height: none; margin: 0 0 12px; padding: 20px 0 4px; }
    #axuda.mg-axuda-flotante .mg-axuda-log > :first-child { margin-top: 0; }
    #axuda.mg-axuda-flotante .mg-msg { max-width: 88%; padding: 10px 14px; font-size: 15px; }
    #axuda.mg-axuda-flotante .mg-axuda-form { display: flex; flex: none; gap: 8px; }
    #axuda.mg-axuda-flotante .mg-axuda-input { flex: 1; width: auto; min-width: 0; height: 48px; padding: 0 16px; font-size: 16px; }
    #axuda.mg-axuda-flotante .mg-axuda-enviar { display: grid; flex: none; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--mg-navy); color: #fff; }
    #axuda.mg-axuda-flotante .mg-axuda-enviar:active { transform: scale(.95); }
    #axuda.mg-axuda-flotante .mg-axuda-enviar:focus-visible { outline: 3px solid var(--mg-gold); outline-offset: 2px; }
    #axuda.mg-axuda-flotante .mg-axuda-nota { flex: none; max-width: none; margin: 10px 0 0; padding: 0; font-size: 12px; line-height: 1.35; }
    #axuda.mg-axuda-flotante.is-conversa .mg-axuda-chips,
    #axuda.mg-axuda-flotante.is-conversa .mg-axuda-nota-resto { display: none; }
}
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
    #axuda.mg-axuda-flotante .mg-axuda-box,
    #axuda.mg-axuda-flotante.is-open .mg-axuda-box { transform: none; transition: opacity 150ms ease-out, visibility 0s; }
}

/* Con movemento reducido: só fundidos, sen subir, escalonar nin latexar */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    #axuda.mg-axuda-folla .mg-axuda-box { transform: none; opacity: 0; transition: opacity 200ms ease-out, visibility 0s linear 200ms; }
    #axuda.is-open .mg-axuda-box { opacity: 1; transition: opacity 200ms ease-out, visibility 0s; }
    #axuda.mg-axuda-folla .mg-axuda-box > * { transform: none; transition: opacity 200ms ease-out; }
    #axuda.is-open .mg-axuda-box > * { transition: opacity 200ms ease-out; transition-delay: 0s; }
    .mg-axuda-fondo { transition: opacity 200ms ease-out, visibility 0s linear 200ms; }
    #axuda.is-open .mg-axuda-fondo { transition: opacity 200ms ease-out, visibility 0s; }
}

/****************************************************************************/
/* Fotos de fondo máis lixeiras en pantallas pequenas                       */
/* (ao final para que gañen ás regras xerais de cada sección)               */
/****************************************************************************/

@media (max-width: 1280px) {
    .mg-hero { background-image: url('../img/inicio-hero-1280.webp?v=3'); }
    .mg-admin-cab { background-image: var(--mg-velo), url('../img/administracion-cabeceira-1280.webp?v=2'); }
    .mg-frase { background-image: var(--mg-velo), url('../img/inicio-frase-1280.webp?v=3'); }
}

@media (max-width: 991px) {
    .mg-beneficios-photo { background-image: var(--mg-velo), url('../img/inicio-beneficios-800.webp?v=2'); }
}

@media (max-width: 767px) {
    .mg-hero { background-image: url('../img/inicio-hero-800.webp?v=3'); }
    /* Recorte propio centrado no edificio do mercado; o texto vai debaixo, sobre a parte baixa */
    .page-admin:not(.page-perfil) .mg-admin-cab { padding-top: 260px; background: var(--mg-velo), url('../img/administracion-cabeceira-movil.webp?v=1') 50% 0 / 100% auto no-repeat var(--mg-navy); }
    .mg-frase { background-image: var(--mg-velo), url('../img/inicio-frase-800.webp?v=3'); }
}

/* Impresión / PDF: sen cabeceira, pé nin asistente; na autoavaliación sae só o resultado (non as preguntas) */
@media print {
    .mg-header-oco,
    .mg-bot,
    .mg-footer,
    .top-progress,
    .mg-autoav-intro,
    .mg-autoav-leyenda,
    .mg-autoav-orde,
    .mg-autoav-tipos,
    .mg-autoav-limpar,
    .mg-autoav-form > :not(h2):not(.mg-autoav-resultado):not(.mg-autoav-capitulo),
    .mg-autoav-resultado button,
    .mg-autoav-resultado:empty { display: none; }

    .mg-autoav { padding: 0; }
    .mg-autoav-form:not([hidden]) { display: flex; flex-direction: column; }
    .mg-autoav-form h2 { order: -2; }
    .mg-autoav-resultado { order: -1; }  /* o resultado primeiro, despois as respostas */
    .mg-autoav-capitulo[hidden] { display: block; }  /* os pasos agochados tamén saen */
    .mg-autoav-resultado { margin-top: 0; }
    .mg-autoav-resultado li,
    .mg-autoav-veredicto { break-inside: avoid; }
    .mg-autoav-resultado h3,
    .mg-autoav-resultado h4 { break-after: avoid; }
    .mg-autoav-form * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }  /* sen isto saen sen as cores de cumpre / non cumpre nin a resposta marcada */
}

/****************************************************************************/
/* Son cliente e Son profesional (body .page-perfil): percorrido en seccións con pezas de Administración */
/* Todo o de aquí é só para .page-perfil ou .mg-perfil-*: Administración non cambia */
/****************************************************************************/

.page-perfil p, .page-perfil h2, .page-perfil h3 { text-wrap: pretty; }
.page-perfil section[id] { scroll-margin-top: 24px; }

/* Texto corrido: tinta enteira (navy), 16 px como mínimo */
.page-perfil .mg-perfil-texto p,
.page-perfil p.mg-perfil-texto { color: var(--mg-navy); font-size: max(16px, calc(22 * var(--mg-px))); line-height: 1.55; }
.page-perfil .mg-perfil-texto p:last-child { margin-bottom: 0; }
.page-perfil .mg-perfil-h3 { margin-bottom: max(8px, calc(12 * var(--mg-px))); color: var(--mg-navy); font-size: max(18px, calc(26 * var(--mg-px))); }

/* Cabeceiras: a foto de cada perfil */
.mg-perfil-cab-cliente { background-image: var(--mg-velo), url('../img/cliente-cabeceira-1920.webp?v=2'); background-position: 70% 35%; }
.mg-perfil-cab-profesional { background-image: var(--mg-velo), url('../img/profesional-cabeceira-1920.webp?v=2'); background-position: 75% 40%; }
@media (max-width: 1280px) {
    .mg-perfil-cab-cliente { background-image: var(--mg-velo), url('../img/cliente-cabeceira-1280.webp?v=2'); }
}
@media (max-width: 767px) {
    .mg-perfil-cab-cliente { background-image: var(--mg-velo), url('../img/cliente-cabeceira-800.webp?v=2'); background-position: 72% top; }
    .mg-perfil-cab-profesional { background-image: var(--mg-velo), url('../img/profesional-cabeceira-800.webp?v=1'); background-position: 66% top; }
}

/* Índice en móbil: o primeiro bloque, preto dos chips (coma Administración) */
@media (max-width: 767px) {
    .page-perfil .mg-indice + section { padding-top: 40px; }
}

.mg-perfil-redonda { border-radius: max(10px, calc(16 * var(--mg-px))); }

/* ---------- Cliente: produtos, unha parede de fotos co nome de cada produto ---------- */
.mg-perfil-cab2 { display: grid; grid-template-columns: 1fr 1fr; gap: calc(90 * var(--mg-px)); align-items: end; }
.page-perfil .mg-perfil-cab2 .mg-admin-entrada { margin: 0; }
.page-perfil .mg-perfil-cab2 p.mg-perfil-texto { margin: 0; }
.mg-perfil-produtos { display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: calc(250 * var(--mg-px)); gap: max(8px, calc(16 * var(--mg-px))); margin: calc(60 * var(--mg-px)) 0 0; padding: 0; list-style: none; }
.mg-perfil-produtos li:first-child { grid-column: span 2; grid-row: span 2; }
.mg-perfil-produtos figure { position: relative; height: 100%; margin: 0; overflow: hidden; border-radius: max(10px, calc(16 * var(--mg-px))); }
.mg-perfil-produtos .mg-foto { height: 100%; }
.mg-perfil-produtos img { width: 100%; height: 100%; object-fit: cover; }
.mg-perfil-produtos figcaption { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 40px max(14px, calc(24 * var(--mg-px))) max(10px, calc(18 * var(--mg-px))); background: linear-gradient(rgba(7, 56, 86, 0), rgba(7, 56, 86, .7) 45%, rgba(7, 56, 86, .92)); color: #fff; font-size: max(17px, calc(26 * var(--mg-px))); font-weight: 700; line-height: 1.1; }
.mg-perfil-produtos li:first-child figcaption { font-size: max(22px, calc(40 * var(--mg-px))); }

/* ---------- Cliente: antes de ir, liña vertical con iconas e foto ao lado ---------- */
.mg-perfil-dobre { display: grid; grid-template-columns: 1fr calc(520 * var(--mg-px)); gap: calc(100 * var(--mg-px)); margin-top: calc(60 * var(--mg-px)); }
.mg-perfil-dobre > .mg-foto { align-self: stretch; min-height: 320px; }
.mg-perfil-dobre > .mg-foto img, .mg-perfil-clientela > .mg-foto img, .mg-perfil-selo > .mg-foto img { width: 100%; height: 100%; object-fit: cover; }
.mg-perfil-liña { margin: 0; padding: 0; list-style: none; }
.mg-perfil-liña > li { position: relative; padding: 0 0 max(28px, calc(48 * var(--mg-px))) calc(max(64px, calc(84 * var(--mg-px))) + max(16px, calc(26 * var(--mg-px)))); }
.mg-perfil-liña > li:last-child { padding-bottom: 0; }
.mg-perfil-liña > li:not(:last-child)::after { content: ''; position: absolute; top: max(64px, calc(84 * var(--mg-px))); bottom: 8px; left: calc(max(64px, calc(84 * var(--mg-px))) / 2 - 1px); border-left: 2px solid var(--mg-bg-light); }
.mg-perfil-liña .mg-perfil-circulo { position: absolute; top: 0; left: 0; }
.mg-perfil-circulo { display: flex; align-items: center; justify-content: center; width: max(64px, calc(84 * var(--mg-px))); height: max(64px, calc(84 * var(--mg-px))); border-radius: 50%; background: var(--mg-bg-light); color: var(--mg-blue); font-size: max(24px, calc(32 * var(--mg-px))); }
.mg-perfil-liña h3 { display: flex; align-items: center; min-height: max(64px, calc(84 * var(--mg-px))); margin: 0 !important; }
.page-perfil .mg-perfil-liña .mg-perfil-texto p { margin-bottom: 8px; }
.mg-perfil-liña .mg-link-arrow { margin-top: 8px; }
.page-perfil .mg-perfil-texto a:not(.mg-link-arrow) { color: var(--mg-blue); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Cliente: no posto, foto a sangue pola esquerda e texto á dereita ---------- */
/* Marcadores xunto ao texto: a Xunta Sans pinta alta na súa caixa, así que suben --mg-optico (regra de :root). Con translate: o transform xa o usan o hover e os chevrons */
.mg-link-arrow .mg-arrow,
.mg-btn-branco .mg-arrow,
.mg-normativa-ambito-icona,
.mg-normativa-chev,
.mg-convocatoria a .mg-icona,
.mg-cursos-boton svg,
.mg-beneficio-icon,
.mg-beneficio-chevron,
.mg-admin-excelentes-cab .mg-admin-icona,
.mg-faq-chevron { translate: 0 calc(-1 * var(--mg-optico)); }
/* Co rato ou trackpad, sen rebote ao chegar arriba ou abaixo (só vertical: o xesto lateral de atrás e adiante segue) */
@media (pointer: fine) { html { overscroll-behavior-y: none; } }
@media (hover: hover) and (pointer: fine) {
    .mg-faq-head:hover { color: var(--mg-navy); }
    .mg-beneficio-head:hover .mg-beneficio-title { color: var(--mg-blue); }  /* o título xa vai en azul escuro */
}
@media (min-width: 768px) { .mg-perfil .mg-arrow { translate: 0 calc(-1 * var(--mg-optico)); } }
@media (max-width: 767px) {
    .mg-normativa-ext { translate: 0 calc(-1 * var(--mg-optico)); }  /* apilada: en escritorio xa cadra coa liña base */
    .page-mg .mg-indice a { padding-top: calc(4 * var(--mg-optico)); }  /* o texto ía alto na píldora */
}
/* Normativa: identificador e nome corto na mesma liña base (letras de distinto tamaño) */
.mg-normativa-ref, .mg-normativa-corpo { align-self: baseline; }

/* Recursos: convocatorias sobre banda azul, co Bonos en azul escuro (o dourado é o do selo) e tarxetas brancas. Azul #005f99: o branco dá 6,7:1 (o azul da marca, 4,5:1, e o dourado sobre el, 2,4:1) */
.mg-recursos-banda { margin-top: var(--mg-esp-m); padding: var(--mg-esp-m) 0 var(--mg-esp-s); background: #005f99; }
.mg-recursos-banda .mg-convocatorias { margin: 0; padding: 0 0 var(--mg-esp-s); }
.page-mg .mg-recursos-banda h2 { color: #fff; }
.mg-recursos-banda .mg-bonos { background: var(--mg-navy); color: #fff; }
.page-mg .mg-recursos-banda .mg-bonos h3,
.page-mg .mg-recursos-banda .mg-bonos p { color: #fff; }
.mg-recursos-banda .mg-convocatoria { padding: 20px; border: 0; border-radius: 12px; background: #fff; }
.page-recursos .mg-interese-tarxeta { background: #fff; box-shadow: 0 4px 16px rgba(7, 56, 86, .1); }
.page-recursos .mg-interese-tarxeta:hover,
.page-recursos .mg-interese-tarxeta:focus-visible { background: #dce8f0; }
.page-recursos .mg-interese-circulo { background: #005f99; color: #fff; }
.page-recursos .mg-normativa { margin-top: var(--mg-esp-m); padding: var(--mg-esp-m) 0; background: var(--mg-bg-light); }
.mg-normativa-ambito { padding: 24px; border-radius: 14px; background: #fff; }
@media (max-width: 991px) { .page-recursos .mg-interese-tarxeta { padding: 14px 16px; column-gap: 14px; } }  /* escalados quedaban en 5 e 4 px: o círculo pegado ao texto */
@media (min-width: 992px) { .page-recursos .mg-normativa-ambitos { align-items: stretch; } }  /* Comercio e Consumo, paneis da mesma altura */
@media (max-width: 767px) {
    .page-recursos .mg-recursos-banda .mg-convocatorias-lapelas { margin-top: 0; padding-top: 0; }
    .mg-recursos-banda .mg-convocatorias { padding-top: 16px; }
    .page-recursos .mg-recursos-banda .mg-convocatoria-codigo { padding: 0; background: none; }
    .mg-normativa-ambito { padding: 16px; }
}

.mg-perfil-partido { position: relative; margin-top: var(--mg-esp-l); }
.mg-perfil-partido > .mg-foto { position: absolute; top: 0; bottom: 0; left: 0; width: calc(50% - 40 * var(--mg-px)); }
.mg-perfil-partido > .mg-foto img { width: 100%; height: 100%; object-fit: cover; }
.mg-perfil-partido .container > div { margin-left: 50%; padding: calc(110 * var(--mg-px)) 0 calc(110 * var(--mg-px)) calc(50 * var(--mg-px)); }
.page-perfil .mg-perfil-lema { margin: 0 0 max(12px, calc(20 * var(--mg-px))); color: var(--mg-navy); font-size: max(20px, calc(34 * var(--mg-px))); font-weight: 700; line-height: 1.22; }
.mg-perfil-filas { display: grid; gap: max(24px, calc(40 * var(--mg-px))); margin: max(32px, calc(56 * var(--mg-px))) 0 0; padding: 0; list-style: none; }
.mg-perfil-filas > li { display: grid; align-content: start; grid-template-columns: max(64px, calc(84 * var(--mg-px))) minmax(0, 1fr); gap: 0 max(16px, calc(28 * var(--mg-px))); align-items: start; }
.mg-perfil-filas > li > :not(.mg-perfil-circulo) { grid-column: 2; }
.mg-perfil-filas .mg-perfil-circulo { grid-row: span 3; }
.mg-perfil-filas h3 { margin-top: max(6px, calc(14 * var(--mg-px))); }

/* ---------- Mercados Excelentes: os bloques de raia dourada de Administración, cunha foto á dereita ---------- */
.mg-perfil-selo { display: grid; grid-template-columns: 1fr calc(440 * var(--mg-px)); gap: calc(100 * var(--mg-px)); }
.mg-perfil-selo > .mg-foto { align-self: stretch; }

/* ---------- Profesional: obrigas con lista de iconas, prezos debaixo e a foto soa á dereita ---------- */
.mg-perfil-obrigas { display: grid; grid-template-columns: 1fr calc(500 * var(--mg-px)); gap: calc(100 * var(--mg-px)); }
.mg-perfil-checks { display: grid; grid-template-columns: 1fr 1fr; gap: max(16px, calc(28 * var(--mg-px))) max(20px, calc(40 * var(--mg-px))); margin: max(16px, calc(24 * var(--mg-px))) 0 max(20px, calc(32 * var(--mg-px))); padding: 0; list-style: none; }
.mg-perfil-checks li { display: flex; align-items: center; gap: max(12px, calc(20 * var(--mg-px))); color: var(--mg-navy); font-size: max(16px, calc(21 * var(--mg-px))); font-weight: 700; line-height: 1.3; }
.mg-perfil-checks .mg-perfil-circulo { flex: none; width: max(48px, calc(64 * var(--mg-px))); height: max(48px, calc(64 * var(--mg-px))); font-size: max(20px, calc(26 * var(--mg-px))); }  /* flex: none: senón o texto longo deforma o círculo */
.page-perfil .mg-perfil-nota + .mg-perfil-h3 { margin-top: max(24px, calc(44 * var(--mg-px))); }
.mg-perfil-obrigas strong { color: var(--mg-blue); }
.mg-perfil-obrigas > .mg-foto { height: 100%; }
.mg-perfil-obrigas > .mg-foto img { width: 100%; height: 100%; object-fit: cover; }
.page-perfil .mg-perfil-nota { padding: max(12px, calc(18 * var(--mg-px))) max(16px, calc(24 * var(--mg-px))); border-radius: 8px; background: var(--mg-bg-light); }

/* ---------- Profesional: mellorar o posto, dúas fotos grandes co texto debaixo ---------- */
.mg-perfil-grandes { display: grid; grid-template-columns: 1fr 1fr; gap: calc(70 * var(--mg-px)); margin: calc(60 * var(--mg-px)) 0 0; padding: 0; list-style: none; }
.mg-perfil-grandes .mg-foto { height: calc(360 * var(--mg-px)); margin-bottom: max(16px, calc(30 * var(--mg-px))); }
.mg-perfil-grandes img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Profesional: clientela, foto e dous bloques con ideas en pílulas ---------- */
.mg-perfil-clientela { display: grid; grid-template-columns: calc(470 * var(--mg-px)) 1fr; gap: calc(100 * var(--mg-px)); margin-top: calc(60 * var(--mg-px)); }
.mg-perfil-clientela > .mg-foto { align-self: stretch; }
.mg-perfil-bloque + .mg-perfil-bloque { margin-top: max(32px, calc(56 * var(--mg-px))); }
.page-perfil .mg-perfil-lead { margin: max(12px, calc(18 * var(--mg-px))) 0 max(8px, calc(12 * var(--mg-px))); color: var(--mg-navy); font-size: max(16px, calc(22 * var(--mg-px))); font-weight: 700; }
.mg-perfil-chips { margin: 0; padding-left: 1.4em; list-style: disc; }  /* lista de texto: as pílulas parecían botóns */
.mg-perfil-chips li { margin-top: 6px; color: var(--mg-navy); }

/* ---------- Profesional: formación, destacado con foto e catro filas con icona ---------- */
.mg-perfil-formacion { margin-top: calc(60 * var(--mg-px)); }
.mg-perfil-formacion .mg-link-arrow { color: var(--mg-navy); }  /* o azul sobre o azul claro queda en 4,05:1 (AA pide 4,5) */
.mg-perfil-formacion .mg-link-arrow { color: var(--mg-navy); }  /* o azul sobre o azul claro queda en 4,05:1 (AA pide 4,5) */
.mg-perfil-formacion .mg-link-arrow { color: var(--mg-navy); }  /* o azul sobre o azul claro queda en 4,05:1 (AA pide 4,5) */
.mg-perfil-destacado { display: grid; grid-template-columns: calc(560 * var(--mg-px)) 1fr; align-items: center; margin-bottom: max(40px, calc(80 * var(--mg-px))); overflow: hidden; border-radius: max(10px, calc(16 * var(--mg-px))); background: var(--mg-bg-light); }
.mg-perfil-destacado .mg-foto { height: 100%; min-height: calc(320 * var(--mg-px)); }
.mg-perfil-destacado img { width: 100%; height: 100%; object-fit: cover; }
.mg-perfil-destacado > div { padding: max(20px, calc(50 * var(--mg-px))) max(20px, calc(70 * var(--mg-px))); }
.mg-perfil-formacion .mg-perfil-filas { grid-template-columns: 1fr 1fr; gap: max(28px, calc(64 * var(--mg-px))) max(24px, calc(90 * var(--mg-px))); margin: 0; }

/* ---------- Profesional: relevo, banda de Administración e dous bloques con raia azul enriba ---------- */
.mg-perfil-relevo { display: grid; grid-template-columns: 1fr 1fr; gap: calc(80 * var(--mg-px)); margin: calc(60 * var(--mg-px)) 0 0; padding: 0; list-style: none; }
.mg-perfil-relevo > li { padding-top: max(16px, calc(26 * var(--mg-px))); border-top: 3px solid var(--mg-blue); }

/* Presentación (cliente): parágrafos separados e a foto co alto do texto */
.page-perfil .mg-admin-historia-intro .mg-perfil-texto p { margin-bottom: 14px; }
.page-perfil .mg-admin-historia-intro .mg-perfil-texto p:first-child { font-size: max(17px, calc(26 * var(--mg-px))); font-weight: 700; line-height: 1.4; }
.page-perfil .mg-admin-historia-intro { align-items: stretch; }
.page-perfil .mg-admin-historia-intro > .mg-foto img { width: 100%; height: 100%; object-fit: cover; }

/* Banda do relevo: sen frase, sen sombra e coa cara do praceiro na franxa estreita */
.page-perfil .mg-admin-banda::before { display: none; }
.page-perfil .mg-admin-banda { height: max(200px, calc(420 * var(--mg-px))); margin-top: calc(60 * var(--mg-px)); }
.page-perfil .mg-admin-banda .mg-foto { height: 100%; }  /* senón a foto mide o seu alto natural e object-position non fai nada */
.page-perfil .mg-admin-banda img { object-position: 50% 50%; }

/* Dúbidas (cliente), último bloque: o mesmo oco que os outros, tamén antes do pé */
.page-perfil .mg-faq { padding: var(--mg-esp-l) 0; }

/* "Aínda non tes un posto": centrado, coma en Mercados, Formación e Recursos */
.page-perfil .mg-posto { text-align: center; }

/* "Ler máis" (.mg-pilula-mais) só no móbil: corta o primeiro parágrafo a catro liñas e agocha o resto (coma os bloques de Administración) */
@media (max-width: 767px) {
    .mg-perfil-corta:not(.is-aberta) .mg-perfil-texto > p:first-child { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 0; }
    .mg-perfil-corta:not(.is-aberta) .mg-perfil-texto > p + p,
    .mg-perfil-corta:not(.is-aberta) .mg-perfil-agocha { display: none; }
}

/* ---------- Tableta ---------- */
@media (min-width: 768px) and (max-width: 991px) {
    .mg-perfil-obrigas { grid-template-columns: 1fr 280px; gap: 32px; }
    .mg-perfil-produtos { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 150px; }
    .mg-perfil-produtos li:last-child { grid-column: span 2; }
    .mg-perfil-checks { grid-template-columns: 1fr; }
}

/* ---------- Móbil: as mesmas pezas que Administración en móbil (carruseis, filas con icona, oco de 56 px) ---------- */
@media (max-width: 767px) {
    .mg-perfil-cab2, .mg-perfil-dobre, .mg-perfil-obrigas, .mg-perfil-clientela, .mg-perfil-formacion, .mg-perfil-selo, .mg-perfil-relevo { display: block; }
    .page-perfil .mg-perfil-cab2 p.mg-perfil-texto { margin-top: 12px; }

    /* Carrusel co seguinte asomando (coma as oportunidades de Administración) */
    .mg-perfil-carrusel { display: flex !important; gap: 12px; margin: 20px -15px 0 !important; padding: 0 15px !important; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 15px; overscroll-behavior-x: contain; scrollbar-width: none; }
    .mg-perfil-carrusel::-webkit-scrollbar { display: none; }
    .mg-perfil-carrusel > li { flex: 0 0 82%; scroll-snap-align: start; }

    .mg-perfil-produtos > li { flex-basis: 40% !important; height: 170px; }
    .mg-perfil-produtos li:first-child { flex-basis: 64% !important; }
    .mg-perfil-produtos figure { border-radius: 12px; }
    .mg-perfil-produtos figcaption, .mg-perfil-produtos li:first-child figcaption { padding: 28px 12px 10px; font-size: 17px; }

    .mg-perfil-dobre { margin-top: 20px; }
    .mg-perfil-dobre > .mg-foto { display: none; }
    /* Antes de ir: carrusel de catro tarxetas (a liña só ten sentido en escritorio) */
    .mg-perfil-liña > li { padding: 16px 18px 18px !important; border-radius: 12px; background: var(--mg-bg-light); }
    .mg-perfil-liña > li::after { display: none; }
    .mg-perfil-liña .mg-perfil-circulo { position: static; margin-bottom: 8px; background: #fff; }
    .mg-perfil-liña h3 { min-height: 0 !important; margin-bottom: 6px !important; }
    /* Sobre o azul claro o azul da marca dá 4,1:1: as ligazóns das tarxetas van en azul escuro */
    .page-perfil .mg-perfil-liña a, .page-perfil .mg-perfil-destacado a { color: var(--mg-navy); }
    .page-perfil .mg-admin-historia-intro .mg-perfil-texto p:first-child { font-size: 17px; }
    .page-perfil .mg-admin-historia-intro > .mg-foto img { height: 180px; }
    .page-perfil .mg-admin-historia-intro .mg-pilula-mais { align-self: flex-start; margin-top: -8px; }
    .mg-perfil-liña .mg-perfil-circulo, .mg-perfil-filas .mg-perfil-circulo { width: 44px; height: 44px; font-size: 20px; }
    .page-perfil .mg-perfil-h3 { font-size: 18px; }
    .page-perfil .mg-perfil-texto p, .page-perfil p.mg-perfil-texto { font-size: 16px; line-height: 1.5; }
    .page-perfil .mg-perfil-liña .mg-perfil-texto p, .page-perfil .mg-perfil-filas .mg-perfil-texto p { font-size: 15px; line-height: 1.45; }

    .mg-perfil-partido { margin-top: 56px; }
    .mg-perfil-partido > .mg-foto { position: relative; width: auto; height: 200px; margin: 0 15px; border-radius: 12px; }
    .mg-perfil-partido .container > div { margin: 0; padding: 24px 0 0; }
    .page-perfil .mg-perfil-lema { font-size: 20px; }
    .mg-perfil-filas { gap: 18px; margin-top: 20px; }
    .mg-perfil-filas > li { grid-template-columns: 44px minmax(0, 1fr); gap: 0 14px; }
    .mg-perfil-filas h3 { display: flex; align-items: center; min-height: 44px; margin: 0 0 6px !important; }


    .mg-perfil-selo > .mg-foto { display: none; }

    .mg-perfil-obrigas > .mg-foto { display: block; height: 200px; margin-top: 24px; border-radius: 12px; }
    .mg-perfil-checks { grid-template-columns: 1fr; gap: 10px; margin: 16px 0; }
    .mg-perfil-checks li { font-size: 16px; }
    .mg-perfil-checks .mg-perfil-circulo { width: 44px; height: 44px; font-size: 20px; }

    .mg-perfil-grandes .mg-foto { height: 160px; margin-bottom: 14px; border-radius: 12px; }
    .mg-perfil-clientela { margin-top: 20px; }
    .mg-perfil-clientela > .mg-foto { height: 180px; margin-bottom: 24px; border-radius: 12px; }
    .mg-perfil-formacion { margin-top: 20px; }
    .mg-perfil-destacado { margin-bottom: 28px; border-radius: 12px; }
    .mg-perfil-destacado .mg-foto { height: 150px; }
    .mg-perfil-destacado > div { padding: 18px; }
    .mg-perfil-formacion .mg-perfil-filas { grid-template-columns: 1fr; }
    .mg-perfil-relevo { margin-top: 24px; }
    .mg-perfil-relevo > li + li { margin-top: 32px; }
    /* A cabeceira é flex: sen isto o contedor encolle ao texto e queda centrado */
    .page-perfil .mg-admin-cab > .container { width: 100%; }
    /* Ritmo do móbil: 56 px entre bloques, coma a maior parte de Administración */
    .page-perfil .mg-admin-seccion { padding-top: 56px; }
    .page-perfil .mg-faq { padding: 56px 0; }
    .page-perfil .mg-admin-excelentes { margin-top: 56px; }
    /* Enlaces con frecha: 44 px de alto para o dedo */
    .page-perfil .mg-link-arrow { min-height: 44px; }
    .page-perfil .mg-admin-banda { height: 200px; margin-top: 20px; }
    /* Formación: as catro filas, en carrusel de tarxetas (coma Antes de ir en Son cliente) */
    .mg-perfil-formacion .mg-perfil-filas > li { display: block; padding: 16px 18px 18px; border-radius: 12px; background: var(--mg-bg-light); }
    .mg-perfil-formacion .mg-perfil-filas .mg-perfil-circulo { margin-bottom: 8px; background: #fff; }
    .mg-perfil-formacion .mg-perfil-filas h3 { min-height: 0; margin-bottom: 6px !important; }
    .mg-perfil-formacion .mg-perfil-destacado { margin-bottom: 0; }
    .mg-perfil-clientela > .mg-foto, .mg-perfil-destacado .mg-foto { display: none; }
    .mg-perfil-destacado { display: block; }
    .mg-perfil-bloque + .mg-perfil-bloque { margin-top: 28px; }
}