/* ============================================================================
   intouch — logo animado para barra superior
   Huella visible siempre · lockup completo cuando la barra lateral se expande

   Uso mínimo:
     <a class="itc-logo" data-collapsed="false"> …svg inline… </a>
   y al plegar la barra lateral:  data-collapsed="true"

   Todo se escala desde --itc-h (alto de la huella). No toques las proporciones
   --itc-w-* : salen de las cajas reales del logo_bicolor.svg original.
   ========================================================================= */

.itc-logo {
  /* --- tokens que SÍ puedes cambiar ------------------------------------ */
  --itc-h: 32px;                    /* alto de la huella = escala global    */
  --itc-red: #e3032e;               /* rojo de marca (del lockup maestro)   */
  --itc-ink: #1d1d1b;               /* negro de marca                       */
  --itc-mark: var(--itc-red);       /* color de la huella                   */
  --itc-word: var(--itc-ink);       /* color de "intouch" + bajada          */
  --itc-dur: 460ms;                 /* duración plegar/desplegar            */
  --itc-draw: 780ms;                /* lo que tarda en trazarse una cresta  */
  --itc-draw-step: 88ms;            /* retardo entre cresta y cresta        */
  --itc-ease: cubic-bezier(0.22, 0.85, 0.26, 1);

  /* --- proporciones del lockup oficial (no tocar) ---------------------- */
  --itc-w-mark: 0.72308;            /* solo huella                          */
  --itc-w-name: 3.56618;            /* huella + "intouch"                   */
  --itc-w-full: 3.67969;            /* huella + "intouch" + bajada          */
  --itc-lock-h: 1.21175;            /* alto total del lockup                */

  position: relative;
  display: inline-block;
  flex: none;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;

  width: calc(var(--itc-h) * var(--itc-w-full));
  height: calc(var(--itc-h) * var(--itc-lock-h));

  transition:
    width var(--itc-dur) var(--itc-ease),
    height var(--itc-dur) var(--itc-ease);
}

/* El SVG conserva SIEMPRE el tamaño del lockup completo; el contenedor
   es el que se encoge y lo recorta. Así la huella nunca se mueve ni se
   reescala al plegar. */
.itc-logo__svg {
  display: block;
  width: calc(var(--itc-h) * var(--itc-w-full));
  height: calc(var(--itc-h) * var(--itc-lock-h));
  overflow: visible;
}

/* ---------------------------------------------------------------- estados */

/* barra lateral plegada -> solo la huella */
.itc-logo[data-collapsed="true"] {
  width: calc(var(--itc-h) * var(--itc-w-mark));
  height: var(--itc-h);
}

/* variante sin bajada ("Contactability solutions") */
.itc-logo[data-tagline="false"] {
  width: calc(var(--itc-h) * var(--itc-w-name));
  height: var(--itc-h);
}
.itc-logo[data-tagline="false"] .itc-logo__tag { display: none; }

/* ------------------------------------------------- despliegue del texto */

.itc-logo__name,
.itc-logo__tag {
  transform-box: view-box;
  transform-origin: 4174px 2870px;      /* borde izquierdo del bloque de texto */
  transition:
    opacity calc(var(--itc-dur) * 0.72) var(--itc-ease),
    transform calc(var(--itc-dur) * 0.86) var(--itc-ease);
}
/* al desplegar entran escalonados: primero "intouch", luego la bajada */
.itc-logo__name { transition-delay: 110ms; }
.itc-logo__tag  { transition-delay: 185ms; }

.itc-logo[data-collapsed="true"] .itc-logo__name,
.itc-logo[data-collapsed="true"] .itc-logo__tag {
  opacity: 0;
  transform: translateX(-760px);        /* unidades del viewBox */
  transition-delay: 0ms;                /* al plegar salen de inmediato */
}
/* la bajada, al ser secundaria, se va un pelín antes */
.itc-logo[data-collapsed="true"] .itc-logo__tag {
  transition-duration: calc(var(--itc-dur) * 0.5);
}

/* ------------------------------------------- la huella se dibuja sola */

/* Cada cresta se descubre recorriendo su propia línea central: la línea
   avanza por el surco y va dejando la huella detrás. No es un barrido por
   encima — es el trazo real de cada surco creciendo de punta a punta.

   Mecanismo: dentro de una <mask> hay una línea por cresta, con
   stroke-dasharray = su longitud. Al llevar stroke-dashoffset de esa
   longitud a 0, el trazo crece y va destapando la cresta que tiene debajo.

   IMPORTANTE: el estado de reposo es dashoffset 0, o sea, ya dibujada.
   La animación solo la esconde al empezar (fill-mode both). Así, si las
   animaciones no corren — navegador viejo, prefers-reduced-motion, un
   error de CSS — la huella se ve entera igual. Nunca desaparece. */
.itc-logo__ink {
  stroke-dasharray: var(--len);
  stroke-dashoffset: 0;
  animation: itc-draw var(--itc-draw) var(--itc-ease)
             calc(var(--i) * var(--itc-draw-step)) 1 both;
}
@keyframes itc-draw {
  from { stroke-dashoffset: var(--len); }
  to   { stroke-dashoffset: 0; }
}

/* el punto del núcleo aterriza al final, con un rebote corto */
.itc-logo__core {
  transform-box: view-box;
  transform-origin: 1512px 1083px;
  animation: itc-core var(--itc-dur) var(--itc-ease)
             calc(var(--itc-draw) + 7 * var(--itc-draw-step)) 1 both;
}
@keyframes itc-core {
  from { opacity: 0; transform: scale(0); }
  62%  { opacity: 1; transform: scale(1.3); }
  to   { opacity: 1; transform: none; }
}

/* Al pasar el ratón o al enfocar, se redibuja — más rápido, que aquí ya
   sabes lo que vas a ver. Cambiar el nombre de la animación basta para
   reiniciarla desde cero. */
.itc-logo:hover, .itc-logo:focus-visible {
  --itc-draw: 520ms;
  --itc-draw-step: 58ms;
}
.itc-logo:hover .itc-logo__ink,
.itc-logo:focus-visible .itc-logo__ink { animation-name: itc-draw-b; }
@keyframes itc-draw-b {
  from { stroke-dashoffset: var(--len); }
  to   { stroke-dashoffset: 0; }
}
.itc-logo:hover .itc-logo__core,
.itc-logo:focus-visible .itc-logo__core { animation-name: itc-core-b; }
@keyframes itc-core-b {
  from { opacity: 0; transform: scale(0); }
  62%  { opacity: 1; transform: scale(1.3); }
  to   { opacity: 1; transform: none; }
}

/* que la huella aparezca ya dibujada, sin animación */
.itc-logo[data-draw="off"] .itc-logo__ink,
.itc-logo[data-draw="off"] .itc-logo__core { animation: none; }

/* --------------------------------------------------------------- temas */

/* 1 · automático por preferencia del sistema */
@media (prefers-color-scheme: dark) {
  .itc-logo { --itc-word: #ffffff; }
}
/* 2 · tema heredado de un ancestro (<html data-theme="dark"> …) */
[data-theme="light"] .itc-logo { --itc-word: var(--itc-ink); }
[data-theme="dark"]  .itc-logo { --itc-word: #ffffff; }

/* 3 · tema forzado en el propio logo. Va al final y con la misma
       especificidad que el bloque 2, así gana por orden de origen. */
.itc-logo[data-theme="light"] { --itc-word: var(--itc-ink); }
.itc-logo[data-theme="dark"]  { --itc-word: #ffffff; }

/* variantes monocromas */
.itc-logo[data-variant="blanco"] {
  --itc-mark: #ffffff;
  --itc-word: #ffffff;
}
.itc-logo[data-variant="rojo"] {
  --itc-mark: var(--itc-red);
  --itc-word: var(--itc-red);
}

/* ------------------------------------------------- accesibilidad / foco */

.itc-logo:focus-visible {
  outline: 2px solid var(--itc-mark);
  outline-offset: 4px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .itc-logo,
  .itc-logo * {
    animation: none !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
}