/* ============================================================
 * Menú global YoMeAnimo! — fuente única: new-web/_menu/
 * Editar ACÁ y correr aplicar-menu.py. Lo que toques dentro de
 * cada página se pisa en la próxima aplicada.
 *
 * Todo va prefijado con .ymm- para no chocar con el CSS de las
 * maquetas ni con el del theme de WordPress (que tiene reglas
 * sueltas tipo img{width:100%}).
 *
 * ⚠️ ESTÁNDAR DE BREAKPOINT (2026-08-24): el nav completo recién
 * entra a partir de min-width:1000px (ver más abajo, `.ymm-burger{
 * display:none}` / `.ymm-nav{display:flex}`) — a 900-999px el nav
 * NO ENTRA (probado forzándolo: logo pisa "Herramientas", CTA
 * apretado). Toda página "fuera de WordPress" que use este menú
 * DEBE usar el mismo min-width:1000px para su propia capa desktop
 * (`.page{max-width:none}` y el resto del layout ancho). Si no
 * coinciden, queda una zona muerta 900-999px donde el contenido se
 * ve desktop pero el header sigue en hamburguesa (bug real, pasó en
 * las 6 páginas del listado — home, elegí destino, qué es una WH,
 * visabot, comunidad, guía maestra — cada una con SU PROPIO número
 * antes de este arreglo). Página nueva → arrancar en 1000px directo,
 * no reinventar un número. Detalle del bug + método de fix en la
 * memoria de proyecto `menu-global-estructura`.
 * ============================================================ */

.ymm{
  --ymm-magenta:#FF3366;
  --ymm-magenta-oscuro:#C71747;   /* texto magenta sobre rosa: 5.15:1 AA ✓ */
  --ymm-teal:#00DBD0;
  --ymm-teal-icono:#0FA396;
  --ymm-violeta:#6A3765;
  --ymm-tinta:#1f1626;
  --ymm-gris:#8B7E8E;
  --ymm-linea:#EDE7EF;
  --ymm-rosa-suave:#FFDFE8;
  --ymm-teal-suave:#C8F4EF;
  --ymm-lila-suave:#E6D9E4;
  --ymm-rosa-fila:#FBEFF3;
  --ymm-alto:74px;
  /* Ancho del contenido: el MISMO del footer (.ft-in = 1240px, ya unificado en las
     4 páginas). Así las dos piezas globales alinean entre sí y el menú no se va a
     los bordes en pantallas grandes. */
  --ymm-contenido:1240px;
  --ymm-borde:26px;                /* respiro mínimo en pantallas chicas */
  --ymm-lateral:max(var(--ymm-borde), calc((100% - var(--ymm-contenido))/2));
  --ymm-ease:cubic-bezier(.16,1,.3,1);
  --ymm-gap:28px;                  /* aire entre secciones (mobile) */
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
}
/* El mega se posiciona contra ESTE contenedor. Sin esto tomaba el ancestro
   posicionado de la página (cada maqueta tiene el suyo) y quedaba desalineado
   respecto de la barra. El panel mobile es fixed: no lo afecta.
   position:sticky (no solo relative) VIVE ACÁ, no en .ymm-bar: .ymm es un div
   que envuelve solo a la barra, así que su alto propio = el de la barra (sin
   margen extra). El "contenedor" de un position:sticky es su ancestro directo:
   si el sticky está en .ymm-bar, ese ancestro es .ymm mismo, que mide EXACTO
   lo mismo que el header — cero margen para "sostenerse" y deja de pegar al
   primer pixel de scroll (Berna lo notó 25-08 en la guía maestra, pero rompía
   el header en TODO el sitio). Poniendo el sticky acá, el ancestro pasa a ser
   el contenedor de la página (alto real, con espacio de sobra) y sí sostiene.
   sticky sigue sirviendo de ancla para el mega, igual que relative. */
.ymm{position:sticky;top:0;z-index:900}
/* Con el panel mobile ABIERTO, el menú tiene que estar por encima de todo salvo el
   banner de consentimiento (99999, que por ley tiene que seguir siendo clickeable).
   No alcanza con subir el z-index del panel: `position:sticky` siempre crea contexto
   de apilamiento, así que el 1000 del panel sólo compite DENTRO de .ymm y contra la
   página el menú entero vale 900 — los modales del theme (1050) y el flotante de
   VisaBot le quedaban encima (Berna, 2026-08-31, mobile). Se sube sólo mientras está
   abierto, y la clase la pone menu.js: con la barra cerrada tiene que seguir en 900,
   porque un modal SÍ debe taparla. */
.ymm.panel-abierto{z-index:99990}
.ymm *,.ymm *::before,.ymm *::after{box-sizing:border-box}
.ymm img{max-width:none}           /* defensa: el theme tiene img{width:100%} */
/* Defensa contra los estilos de <a> del theme de WP: app.css trae a{color:#007bff}
   y a:not(.btn){text-decoration:underline}. En el iPhone real se vio el CTA del
   panel azul y subrayado (17-08) aunque la especificidad en frío diga que no
   puede pasar — con LiteSpeed generando variantes de CSS por dispositivo, la
   cascada servida no siempre es la del archivo. Blindaje explícito, acotado: */
.ymm a{text-decoration:none !important}
.ymm a.ymm-cta,.ymm a.ymm-cta:visited,.ymm a.ymm-cta:hover{color:#fff}

/* ---------- barra ---------- */
/* `position:relative` es OBLIGATORIO, no decorativo: el theme de WordPress trae en
   app.css una regla genérica `header{position:absolute}`, y esta barra ES un <header>.
   Sin declararla acá, en producción la barra salía del flujo, `.ymm` medía 0 de alto y
   el hero de cada plantilla arrancaba en y=0, o sea DEBAJO del menú (Berna lo vio el
   2026-08-31, en mobile y desktop). Ojo que el síntoma es el opuesto de la banda blanca
   que se arregló el 2026-08-17 con `.ymm ~ .hero-*{margin-top:0}`: esa regla asume que
   el menú SÍ ocupa sus 74px, y esto es lo que lo garantiza. Las dos van juntas.
   El sticky sigue viviendo en `.ymm` (ver comentario de arriba) y no se ve afectado:
   verificado scrolleando 1200px, la barra queda en top 0. */
.ymm-bar{
  position:relative;
  background:#fff;display:flex;align-items:center;
  padding:0 16px;height:var(--ymm-alto);box-shadow:0 1px 0 rgba(24,18,26,.07);
}
.ymm-logo{display:inline-flex;flex:0 0 auto;text-decoration:none}
/* 33px de alto = 100px de ancho: la medida del logo de producción en mobile
   (medida en el sitio real, no a ojo). Desktop ya estaba en 33. */
.ymm-logo img{height:33px;width:auto;display:block}
/* Pastilla como el header de producción (pedido de Berna, 17-08): fondo lila
   suave, redondeada, chevron oscuro. Una sola regla para los dos mundos: la
   barra (mobile y desktop) y el panel usan este mismo .ymm-pais. */
.ymm-pais{
  display:flex;align-items:center;gap:8px;background:#F1ECF3;border:none;cursor:pointer;
  border-radius:999px;margin-left:14px;font-family:inherit;font-weight:700;font-size:14px;
  color:var(--ymm-tinta);letter-spacing:.02em;padding:9px 14px;
  transition:background .15s;
}
.ymm-pais:hover{background:#E9E2EC}
.ymm-pais img{width:26px;height:22px;object-fit:contain}
.ymm-pais .ymm-cv{font-size:12px;color:var(--ymm-tinta)}

/* ---------- piezas que SÓLO existen en desktop ----------
 * Ojo: sin este display:none el mega se derrama en mobile como texto suelto
 * (sus estilos viven dentro del @media de desktop). Pasó al construir la pieza.
 * En mobile la barra es logo + burger: el país y el CTA viven en el panel. */
.ymm-nav,.ymm-mega{display:none}
.ymm-bar .ymm-cta{display:none}

/* ---------- mobile: [país] · [logo centrado] · [burger] ----------
 * Mismo orden que el header de producción (pedido de Berna, 17-08). Antes el
 * logo iba a la izquierda y el país sólo vivía dentro del panel.
 * El logo se centra en ABSOLUTO y no con flex: los dos costados tienen anchos
 * distintos (el selector ~85px, el burger ~44px), así que repartir el espacio
 * con flex lo dejaría corrido. En absoluto queda centrado contra la barra,
 * pase lo que pase con los costados. */
@media (max-width:999px){
  /* TODO acotado a .ymm-bar: el panel mobile tiene su propio logo y su propio
     selector en .ymm-panel-top, y sin este alcance el logo del panel también
     se centraba en absoluto — quedaba encima de la ✕ y empujaba el país. */
  .ymm-bar .ymm-pais{display:flex;margin-left:0}
  .ymm-bar .ymm-pais-wrap{order:1}
  .ymm-bar .ymm-logo{order:2;position:absolute;left:50%;transform:translateX(-50%)}
  .ymm-bar .ymm-burger{order:3;margin-left:auto}
}
/* Teléfonos angostos (320-360): la pastilla del país mide ~107px y el logo va
   centrado en absoluto — a 320 se pisaban por 9px. Se achican los dos un punto;
   medido: 13px de aire a 320. */
@media (max-width:359px){
  .ymm-bar .ymm-pais{padding:7px 10px;gap:6px;font-size:13px}
  .ymm-bar .ymm-pais img{width:22px;height:18px}
  .ymm-bar .ymm-pais .ymm-cv{font-size:11px}
  .ymm-bar .ymm-logo img{height:26px}
}
.ymm-cta{
  background:var(--ymm-magenta);color:#fff;font-family:'Outfit',system-ui,sans-serif;
  font-weight:700;font-size:15px;text-decoration:none;padding:10px 20px;border-radius:999px;
  box-shadow:0 8px 20px rgba(255,51,102,.28);white-space:nowrap;
}
.ymm-burger{
  background:none;border:none;cursor:pointer;display:flex;flex-direction:column;gap:5px;
  padding:10px;margin-left:auto;
}
.ymm-burger span{display:block;width:24px;height:3px;border-radius:3px;background:var(--ymm-tinta)}

/* ---------- tiles de ícono (lenguaje compartido) ---------- */
.ymm-tile{
  width:46px;height:46px;border-radius:13px;display:flex;align-items:center;
  justify-content:center;flex:0 0 auto;
}
.ymm-tile svg{width:22px;height:22px}
.ymm-tile.rosa{background:var(--ymm-rosa-suave)}
.ymm-tile.teal{background:var(--ymm-teal-suave)}
.ymm-tile.lila{background:var(--ymm-lila-suave)}
.ymm-badge{
  display:inline-block;background:var(--ymm-teal);color:#18121A;font-family:'Outfit',sans-serif;
  font-weight:700;font-size:10.5px;letter-spacing:.06em;padding:2px 8px;border-radius:999px;
  margin-left:8px;vertical-align:2px;
}

/* ============================================================
 * MOBILE — panel a pantalla completa, todo abierto
 * ============================================================ */
.ymm-panel{
  position:fixed;inset:0;z-index:1000;background:#fff;display:flex;flex-direction:column;
  opacity:0;transform:scale(.97);visibility:hidden;
  transition:opacity .28s,transform .28s var(--ymm-ease),visibility 0s .28s;
}
.ymm-panel.abierto{opacity:1;transform:none;visibility:visible;transition-delay:0s}
.ymm-panel-top{display:flex;align-items:center;gap:12px;padding:14px 16px 10px;flex:0 0 auto}
.ymm-panel-top .ymm-logo img{height:33px}   /* mismo tamaño que en la barra (pedido 17-08) */
/* La cruz es un SVG con trazo 3 y puntas redondeadas, no un carácter: el glifo
   ✕ de texto casi no engorda con font-weight y rinde distinto en cada sistema. */
.ymm-x{
  width:48px;height:48px;border-radius:999px;border:none;background:#F6F1F5;color:var(--ymm-tinta);
  cursor:pointer;display:flex;align-items:center;
  justify-content:center;margin-left:auto;
}
.ymm-x svg{width:21px;height:21px;display:block}
.ymm-scroll{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:calc(var(--ymm-gap)*.65) 20px 14px;
}
.ymm-item{
  display:flex;align-items:center;justify-content:space-between;padding:12px 0;
  font-family:'Outfit',sans-serif;font-weight:700;font-size:20px;color:var(--ymm-tinta);
  text-decoration:none;
}
.ymm-item-l{display:flex;align-items:center;gap:13px}
.ymm-ch{color:#C9BFCC;font-size:22px;font-weight:600;line-height:1}
.ymm-sep{height:1px;background:var(--ymm-linea);margin:calc(var(--ymm-gap)*.4) 0}
/* labels de grupo: mismo tamaño, jerarquía por color (nunca parecen clickeables) */
.ymm-grupo{
  font-family:'Outfit',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;padding:var(--ymm-gap) 0 10px;
}
.ymm-grupo.primario{color:var(--ymm-violeta)}
.ymm-grupo.secundario{color:var(--ymm-gris)}
/* filas con tile = se clickean */
.ymm-fila{display:flex;align-items:center;gap:13px;padding:11px 0;text-decoration:none}
.ymm-fila .ymm-ch{margin-left:auto;font-size:18px}
.ymm-fila b{
  display:block;font-family:'Outfit',sans-serif;font-weight:700;font-size:16.5px;
  color:var(--ymm-tinta);
}
.ymm-fila small{display:block;color:var(--ymm-gris);font-size:13px;margin-top:1px}
/* herramientas: filas mínimas monocromas (no compiten con Servicios) */
.ymm-min{
  display:flex;align-items:center;gap:11px;padding:9px 0;text-decoration:none;
  font-weight:600;font-size:15.5px;color:#3d3244;
}
.ymm-min svg{width:19px;height:19px;flex:0 0 auto}
.ymm-min .ymm-badge{margin-left:4px}
.ymm-panel-foot{
  flex:0 0 auto;padding:12px 16px calc(18px + env(safe-area-inset-bottom));background:#fff;
  box-shadow:0 -8px 24px rgba(41,16,38,.07);
}
.ymm-panel-foot .ymm-cta{display:block;text-align:center;margin:0;font-size:16px;padding:14px}

/* ============================================================
 * DESKTOP (≥1000px) — nav visible + mega en tarjeta flotante
 * ============================================================ */
@media (min-width:1000px){
  .ymm-bar{padding:0 var(--ymm-lateral)}
  .ymm-logo img{height:33px}
  .ymm-pais{margin-left:18px}
  .ymm-burger{display:none}
  .ymm-bar .ymm-pais{display:flex}
  .ymm-bar .ymm-cta{display:inline-block}
  .ymm-nav{display:flex;align-items:center;gap:28px;margin-left:auto;margin-right:28px}
  .ymm-mega{display:block}
  .ymm-nav-it{
    display:flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;
    white-space:nowrap;text-decoration:none;font-family:'Outfit',sans-serif;font-weight:600;
    font-size:16px;color:var(--ymm-tinta);padding:8px 2px;position:relative;
  }
  .ymm-nav-it .ymm-cv{font-size:11px;color:#A79BAA;transition:transform .18s}
  .ymm-nav-it:hover{color:var(--ymm-magenta)}
  .ymm-nav-it[aria-expanded="true"]{color:var(--ymm-magenta)}
  .ymm-nav-it[aria-expanded="true"] .ymm-cv{transform:rotate(180deg);color:var(--ymm-magenta)}
  /* subrayado SOLO en los que despliegan (los directos cambian de color) */
  .ymm-nav-it[aria-haspopup]::after{
    content:"";position:absolute;left:6px;right:6px;bottom:-3px;height:2.5px;border-radius:2px;
    background:var(--ymm-magenta);transform:scaleX(0);transform-origin:left;
    transition:transform .22s var(--ymm-ease);
  }
  .ymm-nav-it[aria-expanded="true"]::after{transform:scaleX(1)}

  .ymm-mega{
    /* alineado al borde derecho del contenido, no al de la pantalla */
    position:absolute;right:var(--ymm-lateral);top:calc(var(--ymm-alto) + 12px);
    width:min(940px, calc(100% - var(--ymm-lateral)*2));background:#fff;
    border-radius:16px;border:1px solid rgba(209,213,219,.55);padding:26px 32px 28px;z-index:950;
    opacity:0;pointer-events:none;transition:opacity .2s,width .28s var(--ymm-ease);
    box-shadow:0 20px 44px -10px rgba(41,16,38,.30),0 3px 10px rgba(41,16,38,.05);
  }
  .ymm-mega[data-pane="servicios"]{width:560px}
  /* --- variante B (4 ítems): Herramientas con panel propio ---
     En B, Destinos es link directo y no tiene panel; el único pane nuevo es este.
     380 y no más: el contenido de las 3 filas termina a los ~275px, así que una
     tarjeta ancha deja un vacío a la derecha y estira la barra de hover de cada
     fila. Queda cerca de los ~310px que medía esta columna dentro del panel de
     Destinos en la variante A, que es donde el bloque ya se veía bien. */
  .ymm-mega[data-pane="herramientas"]{width:380px}
  .ymm-mega.abierto{pointer-events:auto;opacity:1;animation:ymmCae .3s var(--ymm-ease)}
  /* puente invisible: el mouse no pierde el panel al bajar desde la barra */
  .ymm-mega::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
  @keyframes ymmCae{
    from{opacity:0;transform:translateY(-20px) scale(.95)}
    to{opacity:1;transform:none}
  }
  .ymm-pane{display:none}
  .ymm-pane.on{display:block;animation:ymmEntra .25s var(--ymm-ease)}
  @keyframes ymmEntra{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}

  .ymm-kick{
    font-family:'Outfit',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--ymm-violeta);margin-bottom:14px;
  }
  .ymm-dos{display:grid;grid-template-columns:1.6fr 1fr;gap:0}
  .ymm-izq{padding-right:30px}
  /* países: INFO, no se clickean (el funnel es la fila Explorar) */
  .ymm-paises{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px}
  .ymm-pais-fila{display:flex;align-items:center;gap:13px;height:62px;padding:0 6px;text-decoration:none}
  .ymm-pais-badge{
    width:45px;height:45px;border-radius:999px;background:#fff;display:flex;align-items:center;
    justify-content:center;box-shadow:0 2px 8px rgba(41,16,38,.10);flex:0 0 auto;
  }
  .ymm-pais-badge img{width:25px;height:auto}
  .ymm-pais-fila b{
    display:block;font-family:'Outfit',sans-serif;font-weight:700;font-size:16px;
    color:var(--ymm-tinta);line-height:1.15;
  }
  .ymm-pais-fila small{display:block;font-size:13px;color:#84788A;margin-top:1px}
  /* la única superficie de acción grande del pane */
  .ymm-explorar{
    display:flex;align-items:center;justify-content:space-between;margin-top:14px;
    background:var(--ymm-rosa-fila);border-radius:16px;padding:15px 20px;text-decoration:none;
    font-family:'Outfit',sans-serif;font-weight:700;font-size:15.5px;color:var(--ymm-magenta-oscuro);
    transition:background .15s;
  }
  .ymm-explorar:hover{background:#F7E3EA}
  .ymm-explorar .ymm-fx{font-size:18px;transition:transform .18s}
  .ymm-explorar:hover .ymm-fx{transform:translateX(4px)}
  .ymm-der{border-left:1px solid #EFE9F1;padding-left:28px}
  .ymm-hrow{
    display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:12px;
    text-decoration:none;margin-bottom:4px;
  }
  .ymm-hrow:hover{background:#F6F1F7}
  .ymm-hrow .ymm-tile{width:44px;height:44px;border-radius:12px}
  .ymm-hrow b{
    display:block;font-family:'Outfit',sans-serif;font-weight:700;font-size:15.5px;
    color:var(--ymm-tinta);
  }
  .ymm-hrow b.mag{color:var(--ymm-magenta)}
  .ymm-hrow small{display:block;font-size:13px;color:var(--ymm-gris);margin-top:1px}
  /* servicios: filas con tile + descripción */
  .ymm-srow{
    display:flex;align-items:center;gap:16px;padding:14px;border-radius:16px;
    text-decoration:none;margin-bottom:6px;transition:background .15s;
  }
  .ymm-srow:hover{background:#F6F1F7}
  .ymm-srow .ymm-tile{width:54px;height:54px;border-radius:14px}
  .ymm-srow .ymm-tile svg{width:26px;height:26px}
  .ymm-srow b{
    display:block;font-family:'Outfit',sans-serif;font-weight:700;font-size:17px;
    color:var(--ymm-tinta);
  }
  .ymm-srow small{display:block;font-size:14px;color:#84788A;margin-top:2px}
  .ymm-panel{display:none}
}

/* foco visible para teclado (no aparece con el mouse) */
.ymm :focus-visible{outline:3px solid var(--ymm-magenta);outline-offset:3px;border-radius:8px}

@media (prefers-reduced-motion:reduce){
  .ymm *,.ymm *::before,.ymm *::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ---------- selector de país ----------
 * Desplegable mínimo funcional (2026-08-17): sirve para cerrar el circuito de
 * la cookie `yma_pais` de punta a punta. El diseño se pule aparte.
 * Forma 12px y no pill: es un CAMPO/selector, no un botón de acción — la regla
 * de la marca dice que la pill NO se hereda a campos ni desplegables. */
.ymm-pais-wrap{position:relative;display:inline-flex}
.ymm-pais[aria-expanded="true"] .ymm-cv{transform:rotate(180deg)}
.ymm-pais .ymm-cv{transition:transform .18s ease}
.ymm-pais-menu{
  position:absolute;top:calc(100% + 8px);left:0;z-index:60;min-width:212px;
  background:#fff;border:1px solid var(--ymm-linea,#e7e2e9);border-radius:12px;
  box-shadow:0 12px 32px rgba(24,18,26,.14);padding:6px;
}
.ymm-pais-menu[hidden]{display:none}
.ymm-pais-op{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;
  text-decoration:none;color:var(--ymm-tinta);font-size:14px;font-weight:600;
}
.ymm-pais-op img{width:24px;height:20px;object-fit:contain;flex:none}
.ymm-pais-op span{flex:1}
.ymm-pais-op b{font-size:11px;color:var(--ymm-gris);letter-spacing:.04em;font-weight:700}
.ymm-pais-op:hover,.ymm-pais-op:focus-visible{background:var(--ymm-rosa,#fbeff3);outline:none}
.ymm-pais-op[aria-current="true"]{background:var(--ymm-rosa,#fbeff3)}
.ymm-pais-op[aria-current="true"] b{color:var(--ymm-magenta-oscuro,#C71747)}
/* en el panel mobile el desplegable se ancla a la izquierda y no se sale */

/* ---------- barra de sugerencia de país ----------
 * Aparece SÓLO si el visitante no eligió país todavía y su IP dice otro del que
 * esta página tiene versión. **Sugiere, no redirige** (decisión de Berna,
 * 2026-08-17): así Googlebot —que nunca tiene cookie ni acepta— ve siempre la
 * URL que pidió, y no hay riesgo de que indexe la versión equivocada.
 *
 * `position:fixed` a propósito: no empuja el contenido, así que **no suma CLS**.
 * La home mide CLS 0 hoy y no se puede perder eso por un aviso. */
.ymm-sug{
  position:fixed;left:50%;transform:translateX(-50%) translateY(120%);
  bottom:16px;z-index:1200;max-width:min(560px,calc(100vw - 24px));
  display:flex;align-items:center;gap:12px;
  background:#fff;border:1px solid var(--ymm-linea,#e7e2e9);border-radius:14px;
  box-shadow:0 14px 40px rgba(24,18,26,.18);padding:12px 14px;
  font-size:14px;color:var(--ymm-tinta);
  transition:transform .32s cubic-bezier(.16,1,.3,1);
}
.ymm-sug.on{transform:translateX(-50%) translateY(0)}
.ymm-sug img{width:26px;height:22px;object-fit:contain;flex:none}
.ymm-sug p{margin:0;flex:1;line-height:1.35}
.ymm-sug a{
  background:var(--ymm-magenta,#FF3366);color:#fff;text-decoration:none;
  font-family:'Outfit',system-ui,sans-serif;font-weight:700;font-size:14px;
  padding:9px 16px;border-radius:999px;white-space:nowrap;flex:none;
}
.ymm-sug button{
  background:none;border:none;cursor:pointer;color:var(--ymm-gris,#7a7280);
  font-size:20px;line-height:1;padding:4px 6px;flex:none;
}
@media (prefers-reduced-motion:reduce){ .ymm-sug{transition:none} }
@media (max-width:560px){
  .ymm-sug{flex-wrap:wrap;bottom:10px}
  .ymm-sug p{flex:1 1 100%;order:1}
  .ymm-sug img{order:0} .ymm-sug button{order:0;margin-left:auto}
  .ymm-sug a{order:2;flex:1 1 100%;text-align:center}
}

/* ============================================================
   Compensación del theme de WordPress
   ------------------------------------------------------------
   El header VIEJO del theme es `position:absolute`: no ocupa flujo, y por eso
   cada plantilla le pone un margin-top de ~78-80px a su primer bloque para que
   el contenido no le quede debajo. El menú nuevo es `position:relative` y SÍ
   ocupa su alto, así que ese margen dejó de compensar nada y pasó a dibujar una
   banda blanca entre el menú y el hero.

   Se anula sólo cuando el menú nuevo está presente (combinador de hermano: no
   usa :has(), que va a ~1,6M pv/mes con soporte desparejo). El padding-top
   interno de cada hero NO se toca: ese es diseño propio del bloque, y con él
   solo el contenido queda casi en el mismo Y que en producción.

   Los artículos nuevos (.yma-hero) ya vienen en 0 y no necesitan nada.
   ============================================================ */
.ymm ~ .hero-home,
.ymm ~ .hero-image,
.ymm ~ .hero-colors,
.ymm ~ .hero-image-searchbar{margin-top:0 !important}