/**
 * AXIONS — Sistema de logo unificado · escala φ (≈1.618)
 *
 * Jerarquía: xs → sm → md → base → lg → xl (hero)
 *   base = 5.25rem · sm = base/φ · md = base/√φ · lg = base·√φ · xl = base·φ
 *
 * Marcos: circle · rounded · square · banner (φ:1) · free
 * Usar clases ax-logo-wrap + ax-logo-wrap--{frame} + ax-logo-wrap--{size}
 */
:root {
  --ax-phi: 1.6180339887;
  --ax-inv-phi: 0.6180339887; /* 1/φ */
  --ax-sqrt-phi: 1.2720196495; /* √φ */

  /* Escala de tamaños */
  --ax-logo-base: 5.25rem;
  --ax-logo-xs: 2rem; /* base/φ² */
  --ax-logo-sm: 3.25rem; /* base/φ */
  --ax-logo-md: 4.125rem; /* base/√φ */
  --ax-logo-lg: 6.75rem; /* base·√φ */
  --ax-logo-xl: clamp(5.75rem, 38.2vw, 8.5rem); /* base·φ */
  --ax-logo-hero: var(--ax-logo-xl);

  /* Anchos libres / banner (proporción áurea) */
  --ax-logo-banner-w: min(100%, calc(var(--ax-logo-base) * var(--ax-phi) * 1.35));
  --ax-logo-banner-h: calc(var(--ax-logo-base) / var(--ax-phi));
  --ax-logo-free-max-w: min(100%, calc(var(--ax-logo-base) * var(--ax-phi) * 1.45));
  --ax-logo-free-max-h: var(--ax-logo-base);

  /* Radios derivados de φ */
  --ax-logo-r-sm: 0.5rem;
  --ax-logo-r-md: 0.75rem;
  --ax-logo-r-lg: 1.05rem;
  --ax-logo-r-xl: 1.25rem;

  /* Espaciado bajo logo */
  --ax-logo-gap: calc(var(--ax-logo-base) / var(--ax-phi) * 0.38);
}

/* —— Contenedor base —— */
.ax-logo-wrap {
  --ax-logo-bg: #ffffff;
  --ax-logo-ring: color-mix(in srgb, var(--ax-logo-accent, #b89b6a) 28%, #e8dfd4);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  margin-inline: auto;
  background: var(--ax-logo-bg);
  box-shadow:
    0 6px 20px rgba(31, 26, 23, 0.08),
    0 0 0 1px color-mix(in srgb, var(--ax-logo-ring) 55%, transparent) inset,
    0 0 0 2px var(--ax-logo-ring);
}

/* —— Marcos (figuras) —— */
.ax-logo-wrap--circle {
  width: var(--ax-logo-base);
  height: var(--ax-logo-base);
  border-radius: 50%;
}

.ax-logo-wrap--rounded {
  width: var(--ax-logo-base);
  height: var(--ax-logo-base);
  border-radius: var(--ax-logo-r-lg);
}

.ax-logo-wrap--square {
  width: var(--ax-logo-base);
  height: var(--ax-logo-base);
  border-radius: var(--ax-logo-r-sm);
}

.ax-logo-wrap--banner {
  width: var(--ax-logo-banner-w);
  height: auto;
  min-height: var(--ax-logo-banner-h);
  aspect-ratio: var(--ax-phi) / 1;
  border-radius: var(--ax-logo-r-md);
}

.ax-logo-wrap--free {
  width: auto;
  max-width: var(--ax-logo-free-max-w);
  height: auto;
  min-height: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  overflow: visible;
}

/* —— Borde configurable: none | soft | brand —— */
.ax-logo-wrap--ring-none {
  box-shadow: 0 8px 22px rgba(31, 26, 23, 0.1);
}

.ax-logo-wrap--ring-soft {
  --ax-logo-ring: var(--brand-mid, var(--hub-accent, var(--brand, var(--ax-logo-accent, #b89b6a))));
  box-shadow:
    0 8px 22px color-mix(in srgb, var(--ax-logo-ring) 18%, transparent),
    0 0 0 2px color-mix(in srgb, var(--ax-logo-ring) 72%, #fff),
    0 0 0 4px color-mix(in srgb, var(--ax-logo-ring) 22%, transparent);
}

.ax-logo-wrap--ring-brand {
  --ax-logo-ring: var(--brand-mid, var(--hub-accent, var(--brand, var(--ax-logo-accent, #b89b6a))));
  box-shadow:
    0 8px 22px color-mix(in srgb, var(--ax-logo-ring) 22%, transparent),
    0 0 0 2px color-mix(in srgb, var(--ax-logo-ring) 88%, #fff),
    0 0 0 5px color-mix(in srgb, var(--ax-logo-ring) 28%, transparent);
}

.ax-logo-wrap--free.ax-logo-wrap--ring-none,
.ax-logo-wrap--free.ax-logo-wrap--ring-soft,
.ax-logo-wrap--free.ax-logo-wrap--ring-brand {
  box-shadow: none;
  background: transparent;
}

/* —— Imagen —— */
.ax-logo {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0 !important;
  border: none;
  border-radius: 0;
  object-fit: contain;
  object-position: center center;
  background: transparent;
  -webkit-user-drag: none;
}

.ax-logo-wrap--circle .ax-logo,
.ax-logo-wrap--rounded .ax-logo,
.ax-logo-wrap--square .ax-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ax-logo-wrap--banner .ax-logo {
  width: 92%;
  height: 92%;
  max-width: 92%;
  max-height: 92%;
  object-fit: contain;
}

.ax-logo-wrap--free .ax-logo {
  width: auto;
  height: auto;
  max-width: var(--ax-logo-free-max-w);
  max-height: var(--ax-logo-free-max-h);
  object-fit: contain;
}

/* —— Escala de tamaños (cuadrados / círculos) —— */
.ax-logo-wrap--xs.ax-logo-wrap--circle,
.ax-logo-wrap--xs.ax-logo-wrap--rounded,
.ax-logo-wrap--xs.ax-logo-wrap--square {
  width: var(--ax-logo-xs);
  height: var(--ax-logo-xs);
}

.ax-logo-wrap--sm.ax-logo-wrap--circle,
.ax-logo-wrap--sm.ax-logo-wrap--rounded,
.ax-logo-wrap--sm.ax-logo-wrap--square {
  width: var(--ax-logo-sm);
  height: var(--ax-logo-sm);
}

.ax-logo-wrap--md.ax-logo-wrap--circle,
.ax-logo-wrap--md.ax-logo-wrap--rounded,
.ax-logo-wrap--md.ax-logo-wrap--square {
  width: var(--ax-logo-md);
  height: var(--ax-logo-md);
}

.ax-logo-wrap--lg.ax-logo-wrap--circle,
.ax-logo-wrap--lg.ax-logo-wrap--rounded,
.ax-logo-wrap--lg.ax-logo-wrap--square {
  width: var(--ax-logo-lg);
  height: var(--ax-logo-lg);
}

.ax-logo-wrap--xl.ax-logo-wrap--circle,
.ax-logo-wrap--xl.ax-logo-wrap--rounded,
.ax-logo-wrap--xl.ax-logo-wrap--square {
  width: var(--ax-logo-xl);
  height: var(--ax-logo-xl);
}

/* Banner / free escalados por tamaño */
.ax-logo-wrap--xs.ax-logo-wrap--banner {
  width: min(100%, calc(var(--ax-logo-xs) * var(--ax-phi) * 1.2));
  min-height: calc(var(--ax-logo-xs) / var(--ax-phi));
}
.ax-logo-wrap--sm.ax-logo-wrap--banner {
  width: min(100%, calc(var(--ax-logo-sm) * var(--ax-phi) * 1.15));
  min-height: calc(var(--ax-logo-sm) / var(--ax-phi));
}
.ax-logo-wrap--md.ax-logo-wrap--banner {
  width: min(100%, calc(var(--ax-logo-md) * var(--ax-phi) * 1.2));
  min-height: calc(var(--ax-logo-md) / var(--ax-phi));
}
.ax-logo-wrap--lg.ax-logo-wrap--banner {
  width: min(100%, calc(var(--ax-logo-lg) * var(--ax-phi) * 1.15));
  min-height: calc(var(--ax-logo-lg) / var(--ax-phi));
}
.ax-logo-wrap--xl.ax-logo-wrap--banner {
  width: min(100%, calc(var(--ax-logo-xl) * var(--ax-phi) * 0.95));
  min-height: calc(var(--ax-logo-base) / var(--ax-phi));
}

.ax-logo-wrap--xs.ax-logo-wrap--free .ax-logo { max-width: calc(var(--ax-logo-xs) * var(--ax-phi)); max-height: var(--ax-logo-xs); }
.ax-logo-wrap--sm.ax-logo-wrap--free .ax-logo { max-width: calc(var(--ax-logo-sm) * var(--ax-phi)); max-height: var(--ax-logo-sm); }
.ax-logo-wrap--md.ax-logo-wrap--free .ax-logo { max-width: calc(var(--ax-logo-md) * var(--ax-phi)); max-height: var(--ax-logo-md); }
.ax-logo-wrap--lg.ax-logo-wrap--free .ax-logo { max-width: calc(var(--ax-logo-lg) * var(--ax-phi)); max-height: calc(var(--ax-logo-lg) / var(--ax-phi) * 1.05); }
.ax-logo-wrap--xl.ax-logo-wrap--free .ax-logo { max-width: var(--ax-logo-free-max-w); max-height: var(--ax-logo-lg); }

.ax-logo-wrap--free.ax-logo-wrap--sm,
.ax-logo-wrap--free.ax-logo-wrap--md,
.ax-logo-wrap--free.ax-logo-wrap--lg,
.ax-logo-wrap--free.ax-logo-wrap--xl,
.ax-logo-wrap--banner.ax-logo-wrap--sm,
.ax-logo-wrap--banner.ax-logo-wrap--md,
.ax-logo-wrap--banner.ax-logo-wrap--lg,
.ax-logo-wrap--banner.ax-logo-wrap--xl {
  width: auto;
  height: auto;
}

/* —— Alias contextos (solo acentos; tamaños vienen de arriba) —— */
.hub-familiar__logo-wrap,
.escudo-logo-wrap,
.go-carta-logo-wrap,
.go-premium__logo.ax-logo-wrap {
  --ax-logo-bg: #ffffff;
  --ax-logo-ring: color-mix(in srgb, var(--hub-accent, var(--escudo-accent, var(--go-accent, #b89b6a))) 22%, #fff);
}

.hub-familiar__logo-wrap--circle:not(.hub-familiar__logo-wrap--fit-contain) .hub-familiar__logo,
.escudo-logo-wrap--circle:not(.escudo-logo-wrap--fit-contain) .escudo-logo,
.go-carta-logo-wrap--circle:not(.go-carta-logo-wrap--fit-contain) .go-carta-logo,
.ax-logo-wrap--circle:not(.ax-logo-wrap--fit-contain) .ax-logo {
  object-fit: cover !important;
  object-position: center center;
  padding: 0 !important;
  width: 100%;
  height: 100%;
}

/* Contain explícito (sellos AXIONS, Jupiter celestial, etc.) */
.hub-familiar__logo-wrap--fit-contain.hub-familiar__logo-wrap--circle .hub-familiar__logo,
.hub-familiar__logo-wrap--fit-contain.ax-logo-wrap--circle .ax-logo,
.escudo-logo-wrap--fit-contain .escudo-logo,
.go-carta-logo-wrap--fit-contain .go-carta-logo,
.cf-mock-hub .ax-logo-wrap--circle .ax-logo {
  object-fit: contain !important;
  object-position: center center;
}

/* Avatar ficha: cover para rellenar el círculo sin esquinas blancas */
.cf-hero__avatar--logo .ax-logo-wrap--circle .ax-logo {
  object-fit: cover !important;
  object-position: center center;
}

.hub-familiar__logo-wrap--free .hub-familiar__logo,
.escudo-logo-wrap--free .escudo-logo,
.go-carta-logo-wrap--free .go-carta-logo,
.hub-familiar__logo-wrap--banner .hub-familiar__logo,
.escudo-logo-wrap--banner .escudo-logo,
.go-carta-logo-wrap--banner .go-carta-logo,
.ax-logo-wrap--free .ax-logo,
.ax-logo-wrap--banner .ax-logo {
  object-fit: contain !important;
}

/* —— Hub: héroe + sombras premium —— */
.hub-familiar__logo-wrap {
  margin-bottom: var(--ax-logo-gap);
}

.hub-familiar__header--logo-hero .hub-familiar__logo-wrap--hero,
.hub-familiar__logo-wrap--hero.ax-logo-wrap--xl {
  margin-bottom: calc(var(--ax-logo-gap) * 0.85);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.26),
    0 0 0 1px rgba(255, 255, 255, 0.12) inset,
    0 0 0 4px color-mix(in srgb, var(--hub-accent, #b89b6a) 22%, transparent);
}

.hub-familiar__header--logo-hero .hub-familiar__logo-wrap--hero.ax-logo-wrap--ring-none,
.hub-familiar__logo-wrap--hero.ax-logo-wrap--ring-none,
.hub-familiar--logo-ring-none .hub-familiar__logo-wrap--hero,
.hub-familiar--logo-ring-none .hub-familiar__logo-wrap:not(.ax-logo-wrap--free) {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

.hub-familiar__header--logo-hero .hub-familiar__logo-wrap--hero.ax-logo-wrap--ring-brand,
.hub-familiar__logo-wrap--hero.ax-logo-wrap--ring-brand,
.hub-familiar--logo-ring-brand .hub-familiar__logo-wrap--hero:not(.ax-logo-wrap--free),
.hub-familiar--logo-ring-brand .hub-familiar__logo-wrap:not(.ax-logo-wrap--free) {
  --ax-logo-ring: var(--hub-accent, var(--brand, #b89b6a));
  box-shadow:
    0 12px 32px color-mix(in srgb, var(--ax-logo-ring) 28%, transparent),
    0 0 0 2px var(--ax-logo-ring),
    0 0 0 5px color-mix(in srgb, var(--ax-logo-ring) 30%, transparent);
}

.hub-familiar__header--logo-hero .hub-familiar__logo-wrap--hero.hub-familiar__logo-wrap--free,
.hub-familiar__logo-wrap--hero.ax-logo-wrap--free {
  box-shadow: none;
  background: transparent;
}

.hub-familiar__logo--initial {
  width: var(--ax-logo-base);
  height: var(--ax-logo-base);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--ax-logo-base) / var(--ax-phi) * 0.72);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--hub-text, #1f1a17);
  background: var(--hub-accent-soft, #f5efe3);
  border-radius: 50%;
  margin: 0 auto var(--ax-logo-gap);
  box-shadow: 0 8px 24px rgba(31, 26, 23, 0.08);
}

/* —— Escudo —— */
.escudo-logo-wrap {
  margin: 0 auto calc(var(--ax-logo-gap) * 0.9);
}

/* —— Carta —— */
.go-carta-logo-wrap {
  margin: 0.15rem auto var(--ax-logo-gap);
  border: 3px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.12);
}

.go-carta-logo-wrap--hero {
  margin: 0.3rem auto calc(var(--ax-logo-gap) * 0.85);
  box-shadow:
    0 12px 32px rgba(15, 23, 42, 0.16),
    0 0 0 1px rgba(255, 255, 255, 0.35) inset,
    0 0 0 4px color-mix(in srgb, var(--go-carta-accent, #b89b6a) 22%, transparent);
}

.go-carta-logo-wrap--free,
.go-carta-logo-wrap--banner {
  border: none;
  box-shadow: none;
  background: transparent;
}

/* —— Servicios Go (premium header) —— */
.go-tenant-header .go-premium__logo.ax-logo-wrap {
  margin: 0 auto var(--ax-logo-gap);
  border: 1px solid color-mix(in srgb, var(--go-accent, #b89b6a) 45%, transparent);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

.go-premium__logo--initial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ax-logo-base);
  height: var(--ax-logo-base);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: calc(var(--ax-logo-base) / var(--ax-phi) * 0.68);
  font-weight: 600;
  color: var(--go-text, #1f1a17);
  background: var(--go-surface, #fff);
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto var(--ax-logo-gap);
}

.go-premium__logo--initial.go-premium__logo--square {
  border-radius: var(--ax-logo-r-sm);
}

/* —— Admin ficha / portal —— */
.cf-brand-preview--logo .cf-brand-preview__frame {
  width: var(--ax-logo-base);
  height: var(--ax-logo-base);
}

.portal-brand-logo {
  width: var(--ax-logo-sm);
  height: var(--ax-logo-sm);
  object-fit: cover;
  border-radius: 50%;
}

.portal-brand-logo--square {
  border-radius: 50%;
}

/* Admin ficha: avatar junto al nombre = círculo limpio, sin anillo */
.cf-hero__avatar,
.cf-hero__avatar--logo {
  border-radius: 50% !important;
  overflow: hidden !important;
}

.cf-hero__avatar--logo .ax-logo-wrap,
.cf-hero__avatar--logo .ax-logo,
.cf-hero__avatar--logo img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  background: transparent !important;
  object-fit: cover !important;
}

@media (min-width: 480px) {
  :root {
    --ax-logo-xl: clamp(6.25rem, 28vw, 8.75rem);
  }

  .hub-familiar__logo-wrap:not(.hub-familiar__logo-wrap--hero):not(.ax-logo-wrap--xl) {
    /* Con título: un poco más de presencia en tablet+ */
  }

  .hub-familiar__logo-wrap.ax-logo-wrap--lg {
    /* lg ya definido en tokens */
  }
}

@media (min-width: 768px) {
  :root {
    --ax-logo-xl: 8.75rem;
  }
}