/* =========================================================================
   Sinergis — el logo como componente, variante para fondo oscuro
   -------------------------------------------------------------------------
   Geometria MEDIDA sobre el logo original:
     lockup 1105 x 305   ·   isotipo 351 x 305 a la izquierda
     eje de espejo verificado al 99,00 %   ·   cuello al 57,19 %

   Las capas `-oscuro` son una VARIANTE DERIVADA: el isotipo original es navy
   #00418D y sobre #0A0E14 daba 1,97:1 de contraste — invisible. Con una curva
   gamma sube a 3,56:1, por encima del 3:1 que WCAG pide a elementos graficos.
   El wordmark pasa a blanco: 1,65:1 -> 16,37:1.
   ========================================================================= */

.logo{ display:block; width:100% }
.logo .lockup{ display:block; position:relative; width:100%; aspect-ratio:1105/305 }
.logo .capa{ position:absolute; display:block }

/* El isotipo vive en su propia caja para que la mariposa de grafo pueda
   aterrizar EXACTAMENTE aqui: el script lee este rectangulo del DOM en vez de
   llevar coordenadas escritas a mano. */
.logo .iso{ position:absolute; left:0; top:0; width:31.7647%; height:100% }
.logo .iso img{ position:absolute; left:0; top:0; width:100%; height:100% }
.logo .wm{ position:absolute; left:31.7647%; top:0; width:68.2353%; height:100% }
.logo .wm img{ position:absolute; left:0; top:0; width:100%; height:100% }
.logo .tag{ position:absolute; left:32.2172%; top:74.0984%; width:39.7285%;
            height:14.0984% }

/* En el hero el isotipo arranca oculto: lo enciende el script justo cuando la
   mariposa de grafo termina de aletear y se funde con el. */
.logo.espera-mariposa .iso{ opacity:0 }

/* Aleteo de reposo, opcional. Seno muestreado en 8 fotogramas con tramo
   lineal: poner una curva encima de un seno ya muestreado lo deforma. */
@keyframes sg-bucle{
  0%   {transform:scaleX(1)}
  12.5%{transform:scaleX(.988)}
  25%  {transform:scaleX(.976)}
  37.5%{transform:scaleX(.988)}
  50%  {transform:scaleX(1)}
  62.5%{transform:scaleX(.988)}
  75%  {transform:scaleX(.976)}
  87.5%{transform:scaleX(.988)}
  100% {transform:scaleX(1)}
}
.logo.respira .iso{ transform-origin:50% 54.4262%;
  animation:sg-bucle var(--marca-bucle) linear infinite }

@media (prefers-reduced-motion:reduce){
  html:not(.forzar-movimiento) .logo.respira .iso{ animation:none }
  html:not(.forzar-movimiento) .logo.espera-mariposa .iso{ opacity:1 }
}