/* =============================================
   CELEBRA MATRIMONIOS — COMPONENTE LOGO
   EazyBiz SpA · Mayo 2026 · v1
   Archivo: logo.css
   Depende de: tokens.css
   ============================================= */

/* ─── BASE ─── */
.celebra-logo {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
}

.celebra-logo__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.celebra-logo__icon svg {
  display: block;
}

.celebra-logo__divider {
  width: 0.6px;
  background-color: var(--color-border-strong);
  align-self: stretch;
  margin: 4px 0;
  flex-shrink: 0;
}

.celebra-logo__wordmark {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.celebra-logo__name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--color-ink);
  line-height: 1;
  letter-spacing: -0.5px;
  display: block;
}

.celebra-logo__submarca {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--color-accent);
  letter-spacing: 4px;
  text-transform: uppercase;
  line-height: 1;
  display: block;
}

.celebra-logo__cobranding {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--color-muted);
  letter-spacing: 0.3px;
  line-height: 1;
  display: block;
}

/* ─── TAMAÑO GRANDE — Hero, portada ─── */
.logo--lg .celebra-logo__icon svg  { width: 56px; height: 56px; }
.logo--lg .celebra-logo__name      { font-size: 42px; }
.logo--lg .celebra-logo__submarca  { font-size: 10px; margin-top: 4px; letter-spacing: 5px; }
.logo--lg .celebra-logo__cobranding{ font-size: 9px; margin-top: 2px; }

/* ─── TAMAÑO MEDIO — Navbar desktop ─── */
.logo--md .celebra-logo__icon svg  { width: 40px; height: 40px; }
.logo--md .celebra-logo__name      { font-size: 30px; }
.logo--md .celebra-logo__submarca  { font-size: 9.5px; margin-top: 1px; letter-spacing: 4.5px; }
.logo--md .celebra-logo__cobranding{ font-size: 8.5px; margin-top: 1px; }

/* ─── TAMAÑO PEQUEÑO — Navbar mobile ─── */
.logo--sm .celebra-logo__icon svg  { width: 30px; height: 30px; }
.logo--sm .celebra-logo__name      { font-size: 24px; }
.logo--sm .celebra-logo__submarca  { font-size: 8px; margin-top: 1px; letter-spacing: 3.5px; }
.logo--sm .celebra-logo__cobranding{ display: none; }

/* ─── TAMAÑO FOOTER ─── */
.logo--footer .celebra-logo__icon svg  { width: 28px; height: 28px; }
.logo--footer .celebra-logo__name      { font-size: 22px; }
.logo--footer .celebra-logo__submarca  { font-size: 8px; margin-top: 2px; letter-spacing: 4px; }
.logo--footer .celebra-logo__cobranding{ font-size: 8px; margin-top: 1px; }

/* ─── VARIANTE OSCURA — sobre fondo índigo ─── */
.logo--dark .celebra-logo__name        { color: var(--color-cream); }
.logo--dark .celebra-logo__submarca    { color: rgba(245, 237, 214, 0.80); }
.logo--dark .celebra-logo__cobranding  { color: rgba(245, 237, 214, 0.40); }
.logo--dark .celebra-logo__divider     { background-color: rgba(245, 237, 214, 0.20); }

/* ─── VARIANTE SOBRE DORADO ─── */
.logo--on-gold .celebra-logo__name        { color: var(--color-ink); }
.logo--on-gold .celebra-logo__submarca    { color: rgba(26, 26, 46, 0.70); }
.logo--on-gold .celebra-logo__cobranding  { color: rgba(26, 26, 46, 0.40); }
.logo--on-gold .celebra-logo__divider     { background-color: rgba(26, 26, 46, 0.20); }