/**
 * Vecttore SpA — Logo Component System
 * ======================================
 * CBO-approved, pixel-perfect implementation.
 *
 * ESTRUCTURA HTML esperada:
 *   <a class="vecttore-logo vecttore-logo--sm" href="...">
 *     <img src="assets/images/isotype.svg" alt="V" class="vecttore-logo__iso">
 *     <span class="vecttore-logo__text">
 *       <span class="vecttore-logo__word">ecttore</span>
 *       <span class="vecttore-logo__dot">.</span>
 *     </span>
 *   </a>
 *
 * REGLAS DE POSICIONAMIENTO (invariables):
 *   1. El isotipo es el MAESTRO — tamaño = --vl-size (NxN px)
 *   2. El texto se ancla en la esquina superior derecha del isotipo
 *   3. El texto se mueve ABAJO N/4 y a la IZQUIERDA N/2
 *   4. La parte INFERIOR de la primera "e" se alinea EXACTAMENTE
 *      con la parte inferior del isotipo.
 *   5. La primera "e" casi pegada al isotipo (same kerning que e-c)
 *
 * TAMAÑOS (--vl-size):
 *   --lg  64px   (hero, splash)
 *   --md  32px   (footer, login, construccion hero)
 *   --sm  20px   (navbar)
 *
 * El font-size del texto se calcula para que:
 *   topOffset + renderedTextHeight = isotipoSize
 *   N/4 + fontSize * xHeightRatio = N
 *
 * Para la fuente ibrand, el x-height ratio medido es ~0.48.
 * Entonces: fontSize = N / (2 * 0.48) = N * 1.042
 * Redondeamos a fontSize ~ N * 1.04
 *
 * Sin embargo, dado que la tipografia ibrand tiene su propia métrica
 * y los navegadores renderizan diferente, usamos un enfoque pragmático:
 *   - font-size = var(--vl-size) (1:1 con el isotipo)
 *   - margin-top = 0.25em (N/4) — esto baja el texto un cuarto del isotipo
 *   - margin-left = -0.5em (N/2) — superpone ligeramente
 *   - Ajuste fino con --vl-text-tweak-y para alinear la base de la "e"
 *     con el borde inferior del isotipo.
 *
 * NOTA: El ajuste --vl-text-tweak-y compensa diferencias de renderizado
 * entre fuente ibrand y el SVG del isotipo. Valor calibrado a 0px,
 * ajustable si cambia la fuente o el SVG.
 */

/* ================================================================
   VARIABLES BASE
   ================================================================ */
:root {
  /* Ajuste fino vertical para alinear base de "e" con base de isotipo.
     Positivo = baja, negativo = sube. Ajustar si cambia la fuente. */
  --vl-text-tweak-y: 0px;

  /* Colores */
  --vl-text-color: #303234;
  --vl-dot-color: #1859B3;
}

/* Dark theme colors */
body.dark-theme,
[data-theme="dark"] {
  --vl-text-color: #e5e5e7;
  --vl-dot-color: #1859B3;
}

/* ================================================================
   COMPONENTE .vecttore-logo
   ================================================================ */
.vecttore-logo {
  display: inline-flex;
  align-items: flex-start;
  text-decoration: none;
  font-family: ibrand, serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  position: relative;
  /* Tamaño por defecto: md */
  --vl-size: 32px;
}

/* Isotipo: cuadrado NxN, nunca se distorsiona */
.vecttore-logo__iso {
  width: var(--vl-size);
  height: var(--vl-size);
  object-fit: contain;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  display: block;
}

/* Texto: posicionado relativo al isotipo */
.vecttore-logo__text {
  display: inline-flex;
  align-items: baseline;
  font-size: var(--vl-size);
  line-height: 1;
  /* Mover ABAJO N/4 */
  margin-top: calc(0.25em + var(--vl-text-tweak-y));
  /* Mover IZQUIERDA N/2 — superpone ligeramente sobre isotipo */
  margin-left: -0.5em;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}

/* Palabra "ecttore" */
.vecttore-logo__word {
  color: var(--vl-text-color);
  font-weight: 400;
  font-style: normal;
}

/* Punto "." — siempre azul marca */
.vecttore-logo__dot {
  color: var(--vl-dot-color);
  font-weight: 400;
  font-style: normal;
}

/* ================================================================
   TAMAÑOS
   ================================================================ */

/* Grande — 64px (hero, splash, brand-book) */
.vecttore-logo--lg {
  --vl-size: 64px;
}

/* Mediano — 32px (footer, login, construccion) */
.vecttore-logo--md {
  --vl-size: 32px;
}

/* Pequeño — 20px (navbar) */
.vecttore-logo--sm {
  --vl-size: 20px;
}

/* Extra-grande — 128px (hero animation) */
.vecttore-logo--xl {
  --vl-size: 128px;
}

/* Responsive: clamp para construccion hero */
.vecttore-logo--responsive {
  --vl-size: clamp(48px, 8vw, 96px);
}

/* ================================================================
   VARIANTES DE COLOR
   ================================================================ */

/* Texto blanco (sobre fondos oscuros, e.g. hero, footer dark) */
.vecttore-logo--light .vecttore-logo__word {
  color: #ffffff;
}

/* Texto con sombra (hero con imagen de fondo) */
.vecttore-logo--shadow .vecttore-logo__text {
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

.vecttore-logo--shadow .vecttore-logo__iso {
  filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.5));
}

/* ================================================================
   ANIMACIONES OPCIONALES
   ================================================================ */

/* Dot bounce (para página en construcción) */
.vecttore-logo--bounce-dot .vecttore-logo__dot {
  display: inline-block;
  animation: vecttore-dot-bounce 2s ease-in-out infinite;
}

@keyframes vecttore-dot-bounce {
  0%, 58%, 100% { transform: translateY(0); }
  8% { transform: translateY(-35px); }
  16% { transform: translateY(0); }
  23% { transform: translateY(-20px); }
  30% { transform: translateY(0); }
  36% { transform: translateY(-10px); }
  42% { transform: translateY(0); }
  47% { transform: translateY(-5px); }
  52% { transform: translateY(0); }
  55% { transform: translateY(-2px); }
}

/* ================================================================
   CENTRADO DE BLOQUE
   ================================================================ */
.vecttore-logo--center {
  justify-content: center;
}