/* =====================================================================
   compartido.css — piezas COMUNES a todas las marcas que no son esqueleto
   (core.css no pinta) ni piel de una marca: el juego de iconos y la rejilla
   a la vista (tecla G · herramienta de verificación).
   Cada página carga: core.css + su brand-*.css + compartido.css.
   ===================================================================== */
@layer tokens {
  :root {
    /**
     * @group herramientas.rejilla
     * @name "Rejilla a la vista · colores de la herramienta"
     * @description Mismos colores en todas las marcas: es una herramienta de
     *              verificación, no una piel. Filetes y subceldas en rojo óxido,
     *              ejes, cruces y círculos en celeste.
     */
    --herr-rejilla-ox:  #8C2A10; /* @kind color */
    --herr-rejilla-cel: #7FB6D4; /* @kind color */
  }
}
@layer components {
  /**
   * @component Icon — juego de iconos (assets/icons/sprite.svg · icons.js)
   * @description Trazo de 1 px a cualquier tamaño, puntas rectas, sin radios
   *   intermedios. Movimiento interno por la variable --m (0 → 1):
   *   dirección (.pd-ico--dir) al pasar el cursor; el resto al confirmar.
   *   En pantallas táctiles el área de toque crece a 44 px sin cambiar el icono.
   */
  .pd-ico { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; flex: none; overflow: visible; --m: 0; /* @kind other */ }
  @media (hover:hover) and (min-width:900px){:is(a, button, [role="button"]):is(:hover, :focus-visible) .pd-ico--dir { --m: 1; /* @kind other */ }}
  :is(a, button, [role="button"]):active .pd-ico,
  [aria-pressed="true"] .pd-ico, [aria-expanded="true"] .pd-ico, .is-on .pd-ico { --m: 1; /* @kind other */ }
  /* movimiento del sprite: vive en la hoja de la página (el SVG no admite <style>) */
  .pdm { transform-box: view-box; transform-origin: 12px 12px; transition: transform 180ms cubic-bezier(.22,1,.36,1), opacity 180ms linear; }
  .pdm-r { transition-duration: 260ms; }
  .pdm-tx { transform: translateX(calc(var(--m, 0) * 2.17px)); }
  .pdm-txn { transform: translateX(calc(var(--m, 0) * -2.17px)); }
  .pdm-ty { transform: translateY(calc(var(--m, 0) * 2.17px)); }
  .pdm-tyn { transform: translateY(calc(var(--m, 0) * -2.17px)); }
  .pdm-ne { transform: translate(calc(var(--m, 0) * 1.66px), calc(var(--m, 0) * -1.66px)); }
  .pdm-nw { transform: translate(calc(var(--m, 0) * -1.66px), calc(var(--m, 0) * -1.66px)); }
  .pdm-se { transform: translate(calc(var(--m, 0) * 1.66px), calc(var(--m, 0) * 1.66px)); }
  .pdm-sw { transform: translate(calc(var(--m, 0) * -1.66px), calc(var(--m, 0) * 1.66px)); }
  .pdm-r45 { transform: rotate(calc(var(--m, 0) * 45deg)); }
  .pdm-r90 { transform: rotate(calc(var(--m, 0) * 90deg)); }
  .pdm-up { transform: scale(calc(1 + var(--m, 0) * .14)); }
  .pdm-dn { transform: scale(calc(1 - var(--m, 0) * .14)); }
  @media (prefers-reduced-motion: reduce) { .pdm { transition: none; } }
  @media (pointer: coarse) {
    :is(a, button, [role="button"]):has(> .pd-ico:only-child) { position: relative; }
    :is(a, button, [role="button"]):has(> .pd-ico:only-child)::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
  }


  /**
   * @component Rejilla — líneas (modo Diseño y rejilla a la vista)
   * @description Filete doble c en rojo óxido · subceldas 1/c · eje punteado
   *   en celeste, sólido solo en los cruces · círculos 1/c en celeste.
   */
  .flatbed, .fb-peek { --fb-filete: calc(1px * 1.306); /* @kind spacing */ --fb-sub: calc(1px / 1.306); /* @kind spacing */ --fb-ox: var(--herr-rejilla-ox); --fb-cel: var(--herr-rejilla-cel); }
  .fb-peek { position: absolute; inset: 0; overflow: hidden; pointer-events: none; display: block !important; visibility: visible !important; opacity: 1 !important; z-index: 50; }
  .fb-peek .fb-grid { mix-blend-mode: multiply; }
  .fb-lines, .fb-tiles { position: absolute; display: grid; }
  .fb-grid  { position: absolute; inset: 0; z-index: 3; }
  .fb-nogrid .fb-grid { display: none; }
  .fb-quiet .fb-shade { display: none; }
  .fb-veil  { position: absolute; background: color-mix(in srgb, var(--marfil-cool) 18%, transparent); }
  .fb-sub { background-repeat: no-repeat;
    background-size: 100% var(--fb-sub), 100% var(--fb-sub), 100% var(--fb-sub), var(--fb-sub) 100%, var(--fb-sub) 100%, var(--fb-sub) 100%;
    background-position: 0 50%, 0 25%, 0 75%, 50% 0, 25% 0, 75% 0;
    background-image:
      repeating-linear-gradient(to right,  color-mix(in srgb, var(--fb-ox) 40%, transparent) 0 1.2px, transparent 1.2px 3.6px),
      repeating-linear-gradient(to right,  color-mix(in srgb, var(--fb-ox) 20%, transparent) 0 1.2px, transparent 1.2px 3.6px),
      repeating-linear-gradient(to right,  color-mix(in srgb, var(--fb-ox) 20%, transparent) 0 1.2px, transparent 1.2px 3.6px),
      repeating-linear-gradient(to bottom, color-mix(in srgb, var(--fb-ox) 40%, transparent) 0 1.2px, transparent 1.2px 3.6px),
      repeating-linear-gradient(to bottom, color-mix(in srgb, var(--fb-ox) 20%, transparent) 0 1.2px, transparent 1.2px 3.6px),
      repeating-linear-gradient(to bottom, color-mix(in srgb, var(--fb-ox) 20%, transparent) 0 1.2px, transparent 1.2px 3.6px); }
  .fb-gv, .fb-gh { position: relative; box-sizing: border-box; }
  .fb-gv { border-left: var(--fb-filete) solid color-mix(in srgb, var(--fb-ox) 80%, transparent); border-right: var(--fb-filete) solid color-mix(in srgb, var(--fb-ox) 80%, transparent); }
  .fb-gh { border-top: var(--fb-filete) solid color-mix(in srgb, var(--fb-ox) 80%, transparent); border-bottom: var(--fb-filete) solid color-mix(in srgb, var(--fb-ox) 80%, transparent); }
  .fb-gv::after, .fb-gh::after { content: ""; position: absolute; }
  .fb-gv::after { top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); background: repeating-linear-gradient(to bottom, var(--fb-cel) 0 1px, transparent 1px 3.6px); }
  .fb-gh::after { left: 0; right: 0; top: 50%; height: 1px; transform: translateY(-50%); background: repeating-linear-gradient(to right, var(--fb-cel) 0 1px, transparent 1px 3.6px); }
  .fb-x { position: absolute; width: var(--subcell-w); height: var(--subcell-w); transform: translate(-50%, -50%);
    background: linear-gradient(var(--fb-cel), var(--fb-cel)) center / 1px 100% no-repeat, linear-gradient(var(--fb-cel), var(--fb-cel)) center / 100% 1px no-repeat; }
  .fb-o { position: absolute; box-sizing: border-box; width: calc(2 * var(--cell-h) + var(--gutter-horizontal)); height: calc(2 * var(--cell-h) + var(--gutter-horizontal)); transform: translate(-50%, -50%); border: var(--fb-sub) solid var(--fb-cel); border-radius: 50%; }
}

/* ── MENÚ PLEGADO EN MÓVIL · común a todo el ecosistema (Pablo, 3 nov 2026) ──
   Por debajo de 900 px la navegación de cada web se pliega bajo su barra y se abre
   con este botón; cada marca le da su letra (hereda familia, cuerpo y color). */
.m-menu{display:none}
@media (max-width:899px){
  .m-menu{display:inline-flex;align-items:center;gap:var(--sp-3);min-height:var(--sp-10);margin-left:auto;padding:0;background:none;border:0;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}
  .m-menu::after{content:"↓"}
  .is-open > .m-menu::after,.is-open .m-menu::after{content:"↑"}
}