/* Muxugol · cabecera 1C «El videomarcador de la página» (ronda pro-design del 25-09-2026, elegida el 29-09).
   La maqueta manda (fragmentos/u1.html, bloque 1C): este CSS es el suyo con los selectores de la web. Estructura en
   Elementor, plantilla de cabecera con widgets nativos:
     .mxg-cab-1c (contenedor, caja de 1240 px)  > .e-con-inner (la rejilla de la maqueta)
       .mxg-1c-logo (Imagen) · .mxg-1c-nav (Menú de Pro: horizontal y, por debajo de 960 px, desplegable) ·
       .mxg-1c-cta (Botón) · .mxg-fx-marcador (contenedor, aria-hidden) > .mxg-1c-rot (Título) + .mxg-1c-pantalla,
       que rellena mxg-marcador.js con el título de la página, el de cada apartado y la fecha de actualización.
   Colores: los globales del kit (--e-global-color-mxg*); las líneas, del blanco del kit con color-mix. */

.mxg-cab-1c {
  --s-fondo: var(--e-global-color-mxgnegro);
  --s-papel: var(--e-global-color-mxgnegro2);
  --s-tinta: var(--e-global-color-mxgblanco);
  --s-tenue: var(--e-global-color-mxggris);
  --s-acento: var(--e-global-color-mxgrojo);
  --s-rojo-texto: var(--e-global-color-mxgrojotexto);
  --s-linea: color-mix(in srgb, var(--e-global-color-mxgblanco) 12%, transparent);
  --s-linea-2: color-mix(in srgb, var(--e-global-color-mxgblanco) 20%, transparent);
  --s-titular: "Montserrat", system-ui, sans-serif;
  --s-texto: "Inter", system-ui, sans-serif;
  --u1c-pad: clamp(16px, 3.2cqi, 44px); --u1c-alto: 72px; --u1c-logo: 150px; --u1c-paso: 4px;
  --u1c-led: clamp(28px, 4.2cqi, 54px); --u1c-led-2: clamp(16px, 2.2cqi, 28px);
  /* Iconos de la casa (máscaras SVG pintadas con currentColor), los de la maqueta. */
  --ico-flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --ico-casa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 11.5 12 4l8.5 7.5M6 10v10h12V10M10 20v-5.5h4V20'/%3E%3C/svg%3E");
  --ico-totem: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.6 3h6.8l2.4 18H6.2zM7.7 9.5h8.6M7 15.5h10'/%3E%3C/svg%3E");
  --ico-copa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4h8v4.5a4 4 0 0 1-8 0zM8 6H5.5a2.5 2.5 0 0 0 2.5 3M16 6h2.5a2.5 2.5 0 0 1-2.5 3M12 12.5V17M8 20.5h8M10 17h4'/%3E%3C/svg%3E");
  --ico-escudo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2 5 6.1v5.4c0 4.4 3 7.6 7 9.3 4-1.7 7-4.9 7-9.3V6.1z'/%3E%3C/svg%3E");
  --ico-mensaje: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 5h15v10.5H10l-5.5 4zM8.5 9.2h7M8.5 12.2h4.5'/%3E%3C/svg%3E");
  container-type: inline-size;
  padding: 0 !important;
  background: var(--s-fondo);
  color: var(--s-tenue);
  box-shadow: 0 1px 0 var(--s-linea), 0 20px 30px -26px var(--s-fondo);
}
.mxg-cab-1c *, .mxg-cab-1c *::before, .mxg-cab-1c *::after { box-sizing: border-box; }

/* Fija arriba con CSS (sin el «sticky» de Pro, que la pasa a fixed y deja un hueco): se suelta con el cajón abierto,
   para que el menú del móvil se pueda recorrer entero, como en la maqueta. */
header.elementor-location-header:has(.mxg-cab-1c) { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 100; }
.admin-bar header.elementor-location-header:has(.mxg-cab-1c) { top: calc(32px + env(safe-area-inset-top, 0px)); }
@media (max-width: 782px) { .admin-bar header.elementor-location-header:has(.mxg-cab-1c) { top: calc(46px + env(safe-area-inset-top, 0px)); } }
/* Con el cajón abierto la cabecera SIGUE fija y se desplaza por dentro (verificador, 29-09: soltarla, como en la maqueta, la
   devolvía al principio de la página y quien abría el menú tras bajar no lo veía: −1.895 px a 390). Se aparta de la maqueta con
   ese motivo medido; a 844×390 la cabecera abierta mide 383 px y cabe. */
header.elementor-location-header:has(.mxg-cab-1c .elementor-menu-toggle.elementor-active) { position: sticky; max-block-size: 100dvh;
  overflow-y: auto; overscroll-behavior: contain; }
/* Las anclas (el índice de las legales, el salto al contenido) caen por debajo de la cabecera fija con 16 px de aire: su alto
   cambia con el ancho (de 176 a 213 px), así que lo mide mxg-marcador.js en --mxg-cab-alto (uso-real, 29-09: las 22 anclas del
   aviso legal quedaban bajo la cabecera con el margen de 110 px de la cabecera de antes). */
html:has(.mxg-cab-1c) [id] { scroll-margin-top: calc(var(--mxg-cab-alto, 220px) + 16px) !important; }

.mxg-cab-1c :is(a, button, [role="button"]):focus-visible { outline: 2px solid var(--s-rojo-texto); outline-offset: 3px; border-radius: 4px; }

/* La rejilla de la barra: logo · menú · botón y, debajo, el marcador. */
/* Las consultas de contenedor miden .mxg-cab-1c (sin relleno, como el lienzo de la maqueta), NO esta caja: con su relleno,
   a 1024 px de pantalla medía 958 px por dentro y saltaba al modo cajón (medido el 29-09). */
.mxg-cab-1c > .e-con-inner {
  display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: var(--u1c-alto) auto;
  grid-template-areas: "logo nav cta" "tablero tablero tablero"; align-items: center !important; gap: 6px 32px;
  padding: 0 var(--u1c-pad) 12px !important;
}
.mxg-cab-1c .mxg-1c-logo { grid-area: logo; inline-size: var(--u1c-logo) !important; max-inline-size: none !important; line-height: 0; margin: 0 !important; }
.mxg-cab-1c .mxg-1c-logo img { display: block; inline-size: 100% !important; max-inline-size: none; block-size: auto; }
/* El Menú de Pro: su envoltura no hace caja, así que el menú horizontal, el botón del cajón y el desplegable son piezas
   de la rejilla, cada una en su sitio. */
.mxg-cab-1c .mxg-1c-nav, .mxg-cab-1c .mxg-1c-nav > .elementor-widget-container { display: contents !important; }
.mxg-cab-1c .elementor-nav-menu--main { grid-area: nav; display: flex !important; justify-content: flex-end; min-inline-size: 0; }
.mxg-cab-1c .elementor-nav-menu--main > .elementor-nav-menu { display: flex !important; flex-wrap: nowrap; gap: 4px 30px; margin: 0; padding: 0; list-style: none; }
/* Pro cierra sus listas con un ::after de limpieza de flotantes: en flex o en rejilla sería una pieza más (30 px de más al final). */
.mxg-cab-1c .elementor-nav-menu::after { display: none !important; }
.mxg-cab-1c .elementor-nav-menu--main .elementor-item { position: relative; display: block; padding: 8px 0 !important; margin: 0 !important;
  font: 500 15px/20px var(--s-texto) !important; letter-spacing: normal !important; color: var(--s-tenue) !important; background: none !important; text-decoration: none; transition: color .2s; }
.mxg-cab-1c .elementor-item::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1px; block-size: 2px; border-radius: 2px;
  background: var(--s-acento); box-shadow: 0 0 8px color-mix(in srgb, var(--s-acento) 60%, transparent); opacity: 1 !important;
  scale: 0 1; transform-origin: left; transition: scale .3s cubic-bezier(.3, .8, .2, 1); }
.mxg-cab-1c .elementor-item:is(:hover, :focus-visible) { color: var(--s-tinta) !important; }
.mxg-cab-1c .elementor-item:is(:hover, :focus-visible)::after { scale: 1 1; }
.mxg-cab-1c .elementor-menu-toggle { display: none !important; }
.mxg-cab-1c .elementor-nav-menu--dropdown { display: none !important; }
/* El botón: el primario de la cabecera, con la flecha de la casa (fuera la de Font Awesome). */
.mxg-cab-1c .mxg-1c-cta { grid-area: cta; margin: 0 !important; }
.mxg-cab-1c .mxg-1c-cta .elementor-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-block-size: 44px;
  padding: 0 18px 0 22px !important; border: 0; border-radius: 22px !important; background: var(--s-acento) !important; color: var(--s-tinta) !important;
  font: 600 15px/1 var(--s-texto) !important; letter-spacing: 0 !important; text-transform: none; text-decoration: none; white-space: nowrap;
  transition: translate .2s, box-shadow .2s; }
.mxg-cab-1c .mxg-1c-cta .elementor-button-content-wrapper { display: inline-flex; align-items: center; gap: 10px; }
.mxg-cab-1c .mxg-1c-cta .elementor-button-content-wrapper::after { content: ""; flex: none; inline-size: 16px; block-size: 16px; background-color: currentColor;
  -webkit-mask: var(--ico-flecha) center / contain no-repeat; mask: var(--ico-flecha) center / contain no-repeat; transition: translate .2s; }
.mxg-cab-1c .mxg-1c-cta .elementor-button:hover { translate: 0 -1px; box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--s-acento) 75%, transparent); }
.mxg-cab-1c .mxg-1c-cta .elementor-button:hover .elementor-button-content-wrapper::after { translate: 3px 0; }

/* El marcador: el rótulo, la pantalla de puntos y el reloj, en un marco coronado por la franja LED del tótem. */
.mxg-cab-1c .mxg-fx-marcador { grid-area: tablero; position: relative; display: grid !important; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; gap: 8px 18px; inline-size: auto !important; margin: 0 !important; padding: 10px 16px !important;
  border: 1px solid var(--s-linea-2); border-radius: 14px; background: var(--s-papel); }
/* Elementor usa el ::before de sus contenedores para la capa de fondo y le da ancho y alto propios (medido: 356 px de ancho a
   390, que asomaba 4 px por la derecha): aquí manda la franja de la maqueta. */
.mxg-cab-1c .mxg-fx-marcador::before { content: ""; position: absolute; inset: -1px 22px auto 22px !important; inline-size: auto !important;
  block-size: 2px !important; border: 0 !important; border-radius: 2px; opacity: 1 !important; mix-blend-mode: normal !important;
  background: var(--s-acento); box-shadow: 0 0 10px 1px color-mix(in srgb, var(--s-acento) 60%, transparent); }
.mxg-cab-1c .mxg-1c-rot, .mxg-cab-1c .mxg-1c-rot .elementor-heading-title { margin: 0; font: 700 11px/1.3 var(--s-titular) !important; letter-spacing: .2em !important;
  text-transform: uppercase; color: var(--s-tenue) !important; white-space: nowrap; }
/* La pantalla recorta: los rótulos suben y bajan dentro de ella, enteros, como en el videomarcador. */
.mxg-cab-1c .mxg-1c-pantalla { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 20px;
  inline-size: auto !important; min-inline-size: 0; overflow: hidden; min-block-size: calc(var(--u1c-led) + 20px); margin: 0 !important;
  padding: 10px 16px 10px 12px !important; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--s-linea);
  background: radial-gradient(circle, color-mix(in srgb, var(--s-tinta) 10%, transparent) 30%, transparent 37%) 0 0 / var(--u1c-paso) var(--u1c-paso), var(--s-fondo); }
.mxg-cab-1c .mxg-1c-msgs { display: grid; align-items: center; min-inline-size: 0; margin: 0;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--s-acento) 75%, transparent)); }
.mxg-cab-1c .mxg-1c-msg { grid-area: 1 / 1; min-inline-size: 0; font: 800 var(--u1c-led)/1 var(--s-titular); letter-spacing: .06em; text-transform: uppercase;
  color: var(--s-rojo-texto);
  -webkit-mask: radial-gradient(circle, black 50%, transparent 58%) 0 0 / var(--u1c-paso) var(--u1c-paso);
  mask: radial-gradient(circle, black 50%, transparent 58%) 0 0 / var(--u1c-paso) var(--u1c-paso); }
/* Los apartados, en letra más baja y hasta dos líneas: en reposo esperan fuera de la vista y entran al llegar a su apartado. */
.mxg-cab-1c .mxg-1c-msg:not(.mxg-1c-msg--pagina) { font-size: var(--u1c-led-2); line-height: 1.14; text-wrap: balance; visibility: hidden; }
.mxg-cab-1c .mxg-1c-reloj { display: grid; justify-items: end; gap: 7px; margin: 0; }
.mxg-cab-1c .mxg-1c-reloj .mxg-1c-rot { font: 700 11px/1.3 var(--s-titular); letter-spacing: .2em; text-transform: uppercase; color: var(--s-tenue); white-space: nowrap; }
.mxg-cab-1c .mxg-1c-hora { font: 800 max(20px, calc(var(--u1c-led) * .56))/1 var(--s-titular); letter-spacing: .08em; font-variant-numeric: tabular-nums;
  color: var(--s-tinta);
  -webkit-mask: radial-gradient(circle, black 50%, transparent 58%) 0 0 / 3px 3px; mask: radial-gradient(circle, black 50%, transparent 58%) 0 0 / 3px 3px;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--s-tinta) 45%, transparent)); }

@container (min-width: 960px) and (max-width: 1099px) {
  .mxg-cab-1c > .e-con-inner { column-gap: 24px; }
  .mxg-cab-1c .elementor-nav-menu--main > .elementor-nav-menu { column-gap: 22px; }
  .mxg-cab-1c .mxg-1c-cta .elementor-button { padding: 0 14px 0 18px !important; font-size: 14.5px !important; }
}
@container (max-width: 759px) {
  .mxg-cab-1c .mxg-1c-reloj { display: none; }
}
/* A dos columnas, el último enlace, si queda solo, ocupa su fila entera (verificador, 29-09: «Contacto» solo a 768). */
@container (min-width: 560px) and (max-width: 959px) {
  .mxg-cab-1c .elementor-nav-menu--dropdown > .elementor-nav-menu > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Tableta y móvil: el menú, en un cajón debajo del marcador, con un icono por apartado. */
@container (max-width: 959px) {
  .mxg-cab-1c > .e-con-inner { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-rows: var(--u1c-alto) auto auto;
    grid-template-areas: "logo . cta boton" "tablero tablero tablero tablero" "nav nav nav nav"; column-gap: 12px; }
  .mxg-cab-1c .elementor-nav-menu--main { display: none !important; }
  .mxg-cab-1c .elementor-menu-toggle { grid-area: boton; position: relative; display: grid !important; place-content: center; inline-size: 44px; block-size: 44px;
    margin: 0 !important; padding: 0 !important; border: 1px solid var(--s-linea-2); border-radius: 12px; color: var(--s-tinta) !important; cursor: pointer;
    background: linear-gradient(var(--s-acento), var(--s-acento)) center / 18px 2px no-repeat, var(--s-papel) !important; transition: background-size .2s; }
  .mxg-cab-1c .elementor-menu-toggle svg, .mxg-cab-1c .elementor-menu-toggle i { display: none !important; }
  .mxg-cab-1c .elementor-menu-toggle::before, .mxg-cab-1c .elementor-menu-toggle::after { content: ""; position: absolute; left: 12px; inline-size: 18px;
    block-size: 2px; border-radius: 2px; background: currentColor; transition: translate .25s, rotate .25s; }
  .mxg-cab-1c .elementor-menu-toggle::before { top: 14px; }
  .mxg-cab-1c .elementor-menu-toggle::after { top: 28px; }
  .mxg-cab-1c .elementor-menu-toggle[aria-expanded="true"] { background-size: 0 2px, auto !important; }
  .mxg-cab-1c .elementor-menu-toggle[aria-expanded="true"]::before { translate: 0 7px; rotate: 45deg; }
  .mxg-cab-1c .elementor-menu-toggle[aria-expanded="true"]::after { translate: 0 -7px; rotate: -45deg; }
  .mxg-cab-1c .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown { grid-area: nav; display: block !important; position: static !important;
    inset: auto !important; inline-size: auto !important; max-block-size: none !important; transform: none !important; overflow: visible !important;
    margin: 12px 0 0 !important; padding: 4px 0 10px; border-block-start: 1px solid var(--s-linea); background: none !important; box-shadow: none !important; }
  .mxg-cab-1c .elementor-nav-menu--dropdown > .elementor-nav-menu { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 32px;
    margin: 0; padding: 0; list-style: none; }
  .mxg-cab-1c .elementor-nav-menu--dropdown .elementor-item { position: relative; display: flex !important; align-items: center; justify-content: flex-start !important;
    gap: 14px; min-block-size: 56px; padding: 8px 4px !important; margin: 0 !important; text-align: start;
    font: 700 clamp(19px, 2.8cqi, 24px)/1.2 var(--s-titular) !important; letter-spacing: normal !important; color: var(--s-tinta) !important; background: none !important;
    border-block-end: 1px solid var(--s-linea); }
  /* Pro pone en absoluto los pseudoelementos de sus enlaces de menú: el icono va en la fila, como el de la maqueta. */
  .mxg-cab-1c .elementor-nav-menu--dropdown .elementor-item::before { content: ""; position: static !important; flex: none; inline-size: 22px; block-size: 22px;
    opacity: 1 !important; transform: none !important; background-color: var(--s-rojo-texto);
    -webkit-mask: var(--mxg-ico, none) center / contain no-repeat; mask: var(--mxg-ico, none) center / contain no-repeat; }
  .mxg-cab-1c .elementor-nav-menu--dropdown .elementor-item::after { bottom: -1px; }
  .mxg-cab-1c .elementor-nav-menu--dropdown .elementor-item[href="https://muxugol.com/"] { --mxg-ico: var(--ico-casa); }
  .mxg-cab-1c .elementor-nav-menu--dropdown .elementor-item[href$="#producto"] { --mxg-ico: var(--ico-totem); }
  .mxg-cab-1c .elementor-nav-menu--dropdown .elementor-item[href$="#beneficios"] { --mxg-ico: var(--ico-copa); }
  .mxg-cab-1c .elementor-nav-menu--dropdown .elementor-item[href$="#personalizacion"] { --mxg-ico: var(--ico-escudo); }
  .mxg-cab-1c .elementor-nav-menu--dropdown .elementor-item[href$="#contacto"] { --mxg-ico: var(--ico-mensaje); }
}
@container (max-width: 559px) {
  /* En la caja interior, no en .mxg-cab-1c: una consulta de contenedor no da estilo a su propio contenedor. */
  .mxg-cab-1c > .e-con-inner { --u1c-paso: 3px; --u1c-led: clamp(18px, 6.2cqi, 24px); --u1c-led-2: clamp(14px, 4.4cqi, 16px); }
  .mxg-cab-1c > .e-con-inner { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: var(--u1c-alto) auto auto auto;
    grid-template-areas: "logo . boton" "tablero tablero tablero" "nav nav nav" "cta cta cta"; }
  /* «ESTÁS EN» en vertical: la pantalla gana 55 px (262 → 317 a 390) y los 21 títulos caben en dos líneas sin bajar de 12 px
     (verificador, 29-09: a 360 el del apartado 16 ocupaba 4 líneas y la cuarta quedaba cortada). */
  .mxg-cab-1c .mxg-fx-marcador { column-gap: 8px; padding: 8px 10px 8px 12px !important; }
  .mxg-cab-1c .mxg-fx-marcador > .mxg-1c-rot { writing-mode: vertical-rl; rotate: 180deg; }
  .mxg-cab-1c .mxg-fx-marcador > .mxg-1c-rot, .mxg-cab-1c .mxg-fx-marcador > .mxg-1c-rot .elementor-heading-title { font-size: 10px !important; letter-spacing: .14em !important; }
  .mxg-cab-1c .mxg-1c-msg { letter-spacing: .03em; }
  .mxg-cab-1c .elementor-nav-menu--dropdown > .elementor-nav-menu { grid-template-columns: minmax(0, 1fr); }
  .mxg-cab-1c .mxg-1c-cta .elementor-button { display: flex; inline-size: 100%; min-block-size: 52px; border-radius: 26px !important; font-size: 16px !important; }
  .mxg-cab-1c .mxg-1c-cta { margin-block: 14px 6px !important; }
  .mxg-cab-1c > .e-con-inner:not(:has(.elementor-menu-toggle.elementor-active)) .mxg-1c-cta { display: none !important; }
}

/* El movimiento, con el scroll y sin JS de animación: mxg-marcador.js da a cada apartado su línea de tiempo de vista (la
   ventana, una línea de lectura justo bajo la cabecera) y mientras la cruza, su título está en el marcador. Sin soporte o
   con el movimiento reducido, el marcador dice la página. */
@keyframes mxg1c-cede { 0% { translate: 0 0; } 100% { translate: 0 -120%; visibility: hidden; } }
/* Al final de la página, el último apartado (mxg-marcador.js pone .mxg-1c-fin): !important gana a las animaciones. */
.mxg-cab-1c.mxg-1c-fin .mxg-1c-msg { visibility: hidden !important; }
.mxg-cab-1c.mxg-1c-fin .mxg-1c-msg--ultimo { visibility: visible !important; translate: 0 0 !important; }
@keyframes mxg1c-entra { 0% { visibility: visible; translate: 0 120%; } 100% { visibility: visible; translate: 0 0; } }
@keyframes mxg1c-sigue { 0%, 100% { visibility: visible; translate: 0 0; } }